<?php 
/**
 * Store Location Map Template
 */
?>

<div id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
	<div class="section-content">
		<div class="nav-tabs-wrapper">
			<ul class="nav nav-tabs pls-store-list" role="tablist">
				<?php 
				$i 	= 0;
				$active_tab = 1;
				foreach( $store_lists as $section ){ 
					$icon = $content_shortcode = '';
					$i++;
					$tab_nav_class = array( 'nav-link' );
					if ( $i == $active_tab ){
						$tab_nav_class[] = 'active';
						$tab_nav_class[] = 'loaded';					
					}
					
					$expanded 	= ( $i == $active_tab ) ? 'true' : 'false';	
					
					$nav_class = implode( ' ', array_filter( $tab_nav_class ) );
					$tab_id = 'pls-tab-'.$id_int.$i;
					$title 				= $section[ 'title' ];
					$address 			= $section[ 'address' ];
					$email 				= $section[ 'email' ];
					$phone 				= $section[ 'phone' ];
					?>
					
					<li class="nav-item">
						<a id="nav-<?php echo esc_attr( $tab_id ); ?>" 
						class="<?php echo esc_attr( $nav_class ); ?>" 
						href="#<?php echo esc_attr( $tab_id ); ?>" 
						data-href="<?php echo esc_attr( $tab_id ); ?>" 
						data-toggle="tab" role="tab" aria-controls="<?php echo esc_attr( $tab_id ); ?>" 
						aria-selected="<?php echo esc_attr($expanded);?>">
							<?php if( ! empty( $title ) ) { ?>
								<h5 class="pls-store-title"><?php echo $title; ?></h5>
							<?php } ?>
							
							<div class="pls-store-info">
								<?php if( ! empty( $phone ) ) { ?>
									<div class="pls-store-info-data">
										<span class="pls-info-label"><?php esc_html_e( 'Phone:', 'modave-core' ); ?></span>
										<span class="pls-info-text"><?php echo $phone; ?></span>
									</div>
								<?php } 
								if( ! empty( $email ) ) { ?>
									<div class="pls-store-info-data">
										<span class="pls-info-label"><?php esc_html_e( 'Email:', 'modave-core' ); ?></span>
										<span class="pls-info-text"><?php echo $email; ?></span>
									</div>
								<?php } 
								if( ! empty( $address ) ) { ?>
									<div class="pls-store-info-data">
										<span class="pls-info-label"><?php esc_html_e( 'Address:', 'modave-core' ); ?></span>
										<span class="pls-info-text"><?php echo $address; ?></span>
									</div>
								<?php } ?>
							</div>
						</a>
					</li>
				<?php } ?>
			</ul>
		</div>
		<div class="tab-content">	
			<?php $i 	= 0;
			$active_tab = 1;
			foreach( $store_lists as $section ){  
				$i++; 
				$tab_content_class 	= ($i == $active_tab ) ? 'tab-pane show active' : 'tab-pane'; 
				$tab_id 			= 'pls-tab-'.$id_int.$i; 
				$title 				= $section[ 'title' ];
				$address 			= $section[ 'address' ];
				$email 				= $section[ 'email' ];
				$phone 				= $section[ 'phone' ];		
				$src 				= '';		
				$params = [
					rawurlencode( $address ),
					absint( $zoom_map )
				];	
				$url = 'https://maps.google.com/maps?q=%1$s&amp;t=m&amp;z=%2$d&amp;output=embed&amp;iwloc=near';
				$src = vsprintf( $url, $params );				
				?>			
				<div class="<?php echo esc_attr($tab_content_class); ?>"
					 id="<?php echo esc_attr($tab_id); ?>"
					 role="panel" aria-labelledby="nav-<?php echo esc_attr($tab_id); ?>">
					<div class="pls-location-map">
						<?php if( !empty( trim( $address ) ) ) { ?>
							<iframe loading="lazy"
									src="<?php echo esc_url( $src ); ?>"
									title="<?php echo esc_attr( $address ); ?>"
									aria-label="<?php echo esc_attr( $address ); ?>"
							></iframe>
						<?php } ?>
					</div>
				</div>
			<?php } ?>
		</div>		
	</div>		
</div>