<?php
$header_text_color = get_header_textcolor();
$header_title_color = get_theme_mod('site_title_color_option', '#000000');
?>
<header>

	<section class="top-bar-three bg-secondary">
		<div class="container">
			<div class="min-h-36 d-flex flex-column flex-sm-row justify-content-between align-items-center">
				
				<div class="position-relative w-p100">
					<?php
					// To store only value which has 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;
						}
					}
					?>

					<?php if (! empty($social_media_filtered) && is_array($social_media_filtered)) : ?>
						<div id="chic_lifestyle_social_media_sections" class="position-md-absolute top-md-50 translate-md-middle-y social-icons">
							<ul class="list-inline m-0 d-flex gap-4 justify-content-center justify-content-sm-start">
								<?php foreach ($social_media_filtered as $value) { ?>
									<?php
									$no_space_class = str_replace('fa fa-', '', $value['social_media_class']);
									$class = strtolower($no_space_class);
									?>
									<li class="<?php echo esc_attr($class); ?> p-0"><a href="<?php echo esc_url($value['social_media_link']); ?>" target="_blank" class="rounded-circle text-white d-flex justify-content-center align-items-center" style="width: 30px; height: 30px;"><i class="<?php echo esc_attr($value['social_media_class']); ?>"></i></a></li>
								<?php } ?>
							</ul>
						</div>
					<?php endif; ?>
				</div>

				<?php if (get_theme_mod('chic_lifestyle_header_search_display_option', false)) : ?>
					<div class="w-p100 py-0 d-flex justify-content-center justify-content-sm-end align-items-center">
						<div id="chic_lifestyle_header_search_section" class="w-280 w-sm-160 w-md-280 h-36 d-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;', 'chic-lifestyle' ); ?>"
								value="<?php the_search_query(); ?>" title="<?php echo esc_attr_e( 'Search for:', 'chic-lifestyle' ); ?>" />
								<button type="button" id="search-btn" class="btn btn-secondary w-52 rounded-end-0">
								<i class="fa fa-search"></i>
								</button>
							</form>	
						</div>
					</div>
				<?php endif; ?>
			</div>
		</div>
	</section>

	<section class="logo header-logo-3 py-8" <?php if (has_header_image()) : ?> style="background-image:url(<?php echo esc_url(get_header_image()); ?>)" <?php endif; ?>>
		<div class="container">
			<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="main-logo w-p100 text-center py-16">
					<?php
					if (has_custom_logo()) {
						the_custom_logo();
					} else if (display_header_text()) : ?>
						<a href="<?php echo esc_url(home_url('/')); ?>" class="lh-1">
							<div class="site-title" style="color: <?php echo $header_title_color; ?>;"><?php echo esc_html(get_bloginfo('name')); ?></div>
							<?php if (get_bloginfo('description')) : ?>
								<p class="site-description mt-8 m-0 border-0 text-dark"><?php echo esc_html(get_bloginfo('description')); ?></p>
							<?php endif; ?>
						</a>
					<?php endif; ?>

				</div>

				

			</div>
		</div> <!-- /.end of container -->
	</section> <!-- /.end of section -->

	<section class="main-nav nav-three bg-primary <?php if ($menu_sticky) echo ' sticky-header'; ?>">
		<div class="container">
			<nav class="navbar navbar-expand-md py-md-0 justify-content-center justify-content-md-end" data-bs-theme="dark">
				<!-- Toggler -->
				<button class="navbar-toggler my-4" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNavbar" aria-controls="primaryNavbar" aria-expanded="false" aria-label="<?php esc_attr_e('Toggle navigation', 'chic-lifestyle'); ?>">
					<span class="navbar-toggler-icon w-20 h-20"></span>
				</button>

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

	</section>
</header>