<?php
	$output = $tabs_nav = $el_class = '';

	extract(
		shortcode_atts(
			array(
				'el_class' => '',
				'tab_type' => 'horizontal',
				'margin_bottom' => '',
			),
			$atts
		)
	);

	$classes = array( 'grve-element grve-tab' );

	if( 'horizontal' == $tab_type ){
		$classes[] = 'grve-horizontal-tab';
	} else {
		$classes[] = 'grve-vertical-tab';
	}

	$classes_string = join( ' ', $classes );

	$style = grve_build_margin_bottom_style( $margin_bottom );

	// Extract tab titles
	preg_match_all( '/vc_tab title="([^\"]+)"(\stab_id\=\"([^\"]+)\"){0,1}/i', $content, $matches, PREG_OFFSET_CAPTURE );
	$tab_titles = array();

	if ( isset($matches[0]) ) { $tab_titles = $matches[0]; }

	$tabs_nav .= '<ul class="grve-tabs-title">';
	foreach ( $tab_titles as $tab ) {
		preg_match('/title="([^\"]+)"(\stab_id\=\"([^\"]+)\"){0,1}/i', $tab[0], $tab_matches, PREG_OFFSET_CAPTURE );
		if(isset($tab_matches[1][0])) {			
			$tabs_nav .= '<li data-rel="#tab-'. (isset($tab_matches[3][0]) ? $tab_matches[3][0] : sanitize_title( $tab_matches[1][0] ) ) .'">' . $tab_matches[1][0] . '</li>';
		}
	}
	$tabs_nav .= '</ul>'."\n";

	echo "\n\t".'<div class="' . esc_attr( $classes_string ) . '" style="' . esc_attr( $style ) . '">';
	echo "\n\t\t\t" . $tabs_nav;
	echo"\n\t\t".'<div class="grve-tabs-wrapper"> ';
	echo "\n\t\t\t" . wpb_js_remove_wpautop( $content );
	echo "\n\t\t".'</div> ';
	echo "\n\t".'</div> ';

?>