<?php
$id = wp_unique_id('tcbTabbedContent-');
extract($attributes);

$active = $tabBorder['active'] ?? ['width' => 0, 'color' => '#000', 'style' => 'solid'];

$theme = $options['theme'] ? $options['theme'] : "default";
$height = $borderHeight['height'] ?? "3px";
$width = $tabMenuBorder['width'] ?? "1px";
$menuBColor = $tabMenuBorder['menuBColor'] ?? "#ccc";
$isTabBG = $elements['isTabBG'];

$mainSl = "#$id";
$tabMenuSl = "$mainSl .tabMenu";
$tabbedSl = "$mainSl .tcbTabContent";

$desktopFont = $titleTypo['fontSize']['desktop'] ?? '16px';
$tabletFont  = $titleTypo['fontSize']['tablet'] ?? $desktopFont;
$mobileFont  = $titleTypo['fontSize']['mobile'] ?? $tabletFont;


$styles = TCBPlugin::getTypoCSS('', $titleTypo)['googleFontLink'] .
	TCBPlugin::getTypoCSS("$tabMenuSl .tabLabel", $titleTypo)['styles'] . "

	$tabMenuSl {
		padding: " . implode(' ', $tabsPadding) . ";
	}
	
	$tabMenuSl .tabLabel {
		font-size: $desktopFont;
	}
	
	@media (max-width: 1024px) {
		$tabMenuSl .tabLabel {
			font-size: $tabletFont;
		}
	}

	@media (max-width: 767px) {
		$tabMenuSl .tabLabel {
			font-size: $mobileFont;
		}
	}
	
	$tabMenuSl li{
		" . TCBPlugin::getColorsCSS($tabColors) . "
	}
	$tabMenuSl li.active {
		" .
	TCBPlugin::getColorsCSS($tabActiveColors) .
	TCBPlugin::getBorderBoxCSS($active)
	. "
	}
	$tabMenuSl li .menuIcon i{
		font-size: " . $icon['size'] . ";
		color: " . $icon['color'] . ";
	}
	$tabMenuSl li.active .menuIcon i{
		color: " . $icon['activeColor'] . ";
	}
	$mainSl .tabContent {" .
	TCBPlugin::getBackgroundCSS($contentBG)
	. "
	}
";

if ($theme === "theme1") {
	$styles .= "
	$tabMenuSl li::after {
		height: $height;
		" . TCBPlugin::getBackgroundCSS($borderBG) . "
	}";
}

if ($theme === "theme1" || $theme === "theme5" || $theme === "theme6") {
	$styles .= "
	$mainSl .tabContent{
		border-top: $width solid $menuBColor;
	}";
}

if ($isTabBG) {
	$styles .= "
	$tabbedSl {
	" . TCBPlugin::getBackgroundCSS($tabbedBG) . "
	padding: " . implode(' ', $TabbedPadding) . ";
	}";
}

// Style disappearing problem
global $allowedposttags;
$allowed_html = wp_parse_args(['style' => [], 'iframe' => [
	'allowfullscreen' => true,
	'allowpaymentrequest' => true,
	'height' => true,
	'loading' => true,
	'name' => true,
	'referrerpolicy' => true,
	'sandbox' => true,
	'src' => true,
	'srcdoc' => true,
	'width' => true,
	'aria-controls' => true,
	'aria-current' => true,
	'aria-describedby' => true,
	'aria-details' => true,
	'aria-expanded' => true,
	'aria-hidden' => true,
	'aria-label' => true,
	'aria-labelledby' => true,
	'aria-live' => true,
	'class' => true,
	'data-*' => true,
	'dir' => true,
	'hidden' => true,
	'id' => true,
	'lang' => true,
	'style' => true,
	'title' => true,
	'role' => true,
	'xml:lang' => true
]], $allowedposttags);

?>

<div <?php echo wp_kses_post(get_block_wrapper_attributes()); ?> id='<?php echo esc_attr($id); ?>' data-attributes='<?php echo esc_attr(wp_json_encode($attributes)); ?>' data-ispremium='<?php echo esc_attr(tcbIsPremium()); ?>'>

	<?php 
	$isPremium = tcbIsPremium();
	$currentTheme = $options['theme'] ?? 'default';
	$isProTheme = $currentTheme !== 'default';
	?>

	<style>
		<?php echo esc_html($styles); ?>
	</style>

	<!-- ✅ Wrapper (important for overlay) -->
	<div class="tcbThemeWrapper">

		<!-- ✅ ALWAYS SHOW THEME -->
		<div class='tcbTabContent <?php echo esc_attr($currentTheme); ?>'>
			<ul class='tabMenu' id='tabMenu-<?php echo esc_attr($id); ?>'>
				<?php foreach ($tabs as $index => $tab) {
					extract($tab);
					$iconShow = $elements['icon'] ? 'show' : 'hide';
					$labelShow = $elements['title'] ? 'show' : 'hide';
					$iconEl = isset($icon['class']) ? "<span class='menuIcon " . $iconShow . " '><i class='" . $icon["class"] . "'></i></span>" : '';

					$iconStyles = isset($icon['color']) || isset($icon['gradient']) ? TCBPlugin::getIconCSS($icon, false) : '';
				?>
					<li>
						<style>
							<?php echo esc_html("#$id #tabMenu-$id > li .menuIcon i{
								$iconStyles
							}"); ?>
						</style>

						<?php echo wp_kses_post($iconEl); ?>

						<span class='tabLabel <?php echo esc_attr($labelShow); ?>'>
							<?php echo wp_kses_post($title); ?>
						</span>
					</li>
				<?php } ?>
			</ul>

			<div class='tabContent' id='tabContent-<?php echo esc_attr($id); ?>'>
				<?php echo wp_kses( $content, $allowed_html ); ?>
			</div>
		</div>

		<!-- ✅ SHOW OVERLAY ONLY FOR PRO THEME -->
		<?php if ( !$isPremium && $isProTheme ) : ?>
			<div class="tcb-pro-overlay">
				<div class="tcb-pro-inner">
					<span class="tcb-pro-badge">This theme available in Pro version</span>
					<a
						href="https://bplugins.com/products/tabbed-contents-block/pricing/"
						target="_blank"
						rel="noopener noreferrer"
						class="tcb-pro-btn"
					>
						Upgrade to Pro 🚀
					</a>
				</div>
			</div>
		<?php endif; ?>

	</div>

	<style>
		.tcbThemeWrapper {
			position: relative;
		}

		.tcb-pro-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0,0,0,0.35);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 20;
			border-radius: 12px;
			transition: all 0.3s ease;
		}

		.tcb-pro-overlay:hover {
			background: rgba(0,0,0,0.45);
		}

		.tcb-pro-inner {
			 display: flex;
			flex-direction: column;  
			align-items: center;
			justify-content: center;
			gap: 12px;             
			text-align: center;
		}

		.tcb-pro-badge {
			font-size: 18px;
			font-weight: 500;
			color: #fff;
			background: none; 
			padding: 0;
		}

		.tcb-pro-btn {
			display: inline-block;
			background: linear-gradient(135deg, #7b61ff, #5b21b6);
			color: #fff;
			padding: 12px 22px;
			border-radius: 10px;
			font-weight: 600;
			text-decoration: none;
			box-shadow: 0 10px 25px rgba(91, 33, 182, 0.4);
			transition: all 0.25s ease;
		}

		.tcb-pro-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 14px 32px rgba(91, 33, 182, 0.5);
		}
	</style>

</div>

