<?php
// Store only social-media value with links :
if ( ! empty( $social_media ) && is_array( $social_media ) ) {
	$social_media_filtered = array();
	foreach ( $social_media as $value ) {
		if( empty( $value['social_media_link'] ) ) {
			continue;
		}
		$social_media_filtered[] = $value; 
	}
}
$contact_number = get_theme_mod( 'contact_number', '' );
$contact_email = get_theme_mod( 'contact_email', '' );
$header_search_enable = get_theme_mod( 'header_search_display_option', false );

?>
<header>
	
<div class="h-p100 h-sm-36 bg-primary top-bar">
	<div class="container-xl h-p100">
		<div class="h-p100 d-flex flex-row justify-content-center justify-content-sm-between align-items-center flex-wrap flex-sm-nowrap">	
			<?php
			if ( ! empty( $social_media_filtered ) && is_array( $social_media_filtered ) ) : ?>
			<div class="d-flex flex-row justify-content-start align-items-center flex-nowrap social-icons">
				<?php foreach ( $social_media_filtered as $value ) { ?>
				<?php
					$no_space_class = str_replace( 'fa fa-', '', $value['social_media_class'] );
					$class = strtolower( $no_space_class );
				?>
		      <div class="w-36 h-36 d-flex justify-content-center align-items-center position-relative <?php echo esc_attr( $class ); ?>">
		      	<a href="<?php echo esc_url( $value['social_media_link'] ); ?>" target="_blank" class="w-p100 h-p100 stretched-link d-flex justify-content-center align-items-center text-white">
		      		<i class="fa fa-<?php echo esc_attr( $value['social_media_class'] ); ?>"></i>
		      	</a>
		      </div>
		    <?php } ?>
			</div>
			<?php endif; ?>

			<?php 
			if( !empty( $contact_number ) || !empty( $contact_email ) ) : ?>
				<div class="h-p100 d-flex flex-row justify-content-end align-items-center flex-nowrap my-8 my-sm-0 mx-12">
					<?php if( !empty( $contact_number ) ) : ?>
						<a href="tel:<?php echo esc_html($contact_number); ?>" class="d-inline-flex align-items-center text-white text-decoration-none text-nowrap me-12 contact-phone">
							<i class="fa fa-phone me-8"></i>
							<?php echo esc_html( $contact_number ); ?>
						</a>
					<?php endif; ?>
					<?php if( !empty( $contact_email ) ) : ?>
						<a href="mailto:<?php echo esc_html($contact_email); ?>" class="d-inline-flex align-items-center text-white text-decoration-none text-nowrap contact-email">
							<i class="fa fa-envelope me-8"></i>
							<?php echo esc_html( $contact_email ); ?>
						</a>
					<?php endif; ?>
				</div>
			<?php endif; ?>

			<?php 
			if( $header_search_enable ) : ?>
				<div class="w-52 w-md-160 w-lg-280 h-36 d-none d-md-flex justify-content-end align-items-center search-top">
					<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group flex-nowrap">
				    <input type="text" name="s" id="search" class="form-control bg-white h-36 min-h-36"
				      placeholder="<?php echo esc_attr_e( 'Search &hellip;', 'travel-tour' ); ?>"
				      value="<?php the_search_query(); ?>" title="<?php echo esc_attr_e( 'Search for:', 'travel-tour' ); ?>" />
				    <button type="button" id="search-btn" class="btn btn-secondary w-52">
				      <i class="fa fa-search"></i>
				    </button>
					</form>	
				</div>
			<?php endif; ?>
		
		</div>
	</div>
</div>

<div class="logo-nav my-24">

		<!-- Brand and toggle get grouped for better mobile display -->		
			<nav class="navbar navbar-expand-lg navbar-light">
				<div class="container-xl">
	      	<div class="main-logo">
		      	<?php if ( has_custom_logo() ) { 
		      		the_custom_logo();
		      	} else if( display_header_text() ) { ?>
		  			<a  class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
		  				<?php if (!empty( get_bloginfo( 'name' ) )): ?>
		  				<div class="site-title">
		  					<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
		  				</div>
		  				<?php endif; ?>
		  				<?php if (!empty( get_bloginfo( 'description' ) )): ?>
		  				<p class="site-description">
		  					<?php echo esc_html( get_bloginfo( 'description' ) ); ?>
		  				</p>
		  				<?php endif; ?>
			  		<?php } ?>
			  		</a>
		  		</div>

		  		<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
		        <span class="navbar-toggler-icon"></span>
	      	</button>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 				
						<?php
            wp_nav_menu( array(
              'theme_location'    => 'primary',
              'menu-id'    				=> 'primary-menu',
              'depth'             => 3,
              'container'         => false,
              'items_wrap' 				=> '<ul id="%1$s" class="navbar-nav me-auto mb-8 mb-md-0 %2$s">%3$s</ul>',
              'menu_class'        => 'navbar-nav pull-right me-auto mb-8 mb-lg-0',
              'fallback_cb'       => '__return_false',
              'walker'            => new Travel_Tour_Wp_Bootstrap_Navwalker()
            ) );
		        ?>
			    </div> <!-- /.end of collaspe navbar-collaspe -->			        
	
		</div> <!-- /.end of container -->
	</nav> 
</div>



<!-- test -->



</header>


