<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Website_from_happy
 * @since 1.0.0
 */
global $version;
$version = '1.0.0';
?>

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php get_verification_codes(); ?>
    <?php get_seo_data(get_the_ID()); ?>

	<!-- Favicon -->
	<link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">

	<?php /*
	<style><?php include dirname(__FILE__) . '/scss/header/header.min.css'; ?> </style>
	*/ ?>
    <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
	<!-- <style><?php include dirname(__FILE__) . '/sass/header/site-header.min.css'; ?> </style> -->
	<!-- Section fade-in animations -->
	<script>document.documentElement.className += ' js-fade';</script>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/animations.css?ver=<?php echo $version; ?>">

	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/header/site-header.min.css?ver=<?php echo $version; ?>">
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/footer/footer.min.css?ver=<?php echo $version; ?>">

	<?php if (is_front_page()): ?>
		<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/home.min.css?ver=<?php echo $version; ?>">
	<?php else: ?>
		<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/sass/style.min.css?ver=<?php echo $version; ?>">
	<?php endif ?>
	<?php get_tracking_codes('head'); ?>
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php get_tracking_codes('body'); ?>
<?php
	if ( is_shop() ){
        $mainheader_rep 		= get_field('main_header_images', wc_get_page_id('shop'));
        $banner_class   		= ( !$mainheader_rep ) ? 'no-banner' : '';
    }
	elseif(is_search() || is_category() || is_404() || is_archive() ||is_product()){
		$mainheader_rep = get_field('archheader_rep', 'option');
	}
	elseif ( !is_front_page() ){
		$mainheader_rep 		= get_field('main_header_images', get_the_ID());
		$banner_class 			= ( !$mainheader_rep ) ? 'no-banner' : '';
	}else{
		$mainheader_rep 		= get_field('mainheader_rep', 'option');
	}
	
	$header_logo 				= get_field('header_logo', 'option');
	$header_logo_white 			= get_field('header_logo_white', 'option');
	$first_slide 				= '';
	$rest_of_slide 				= '';
	$nav_class					= '';
	$banner_class				= '';

	if ( $mainheader_rep ){
		foreach ( $mainheader_rep as $key => $item ){
			if (is_front_page()) {
				$mobile_image        	= validateImage(800, 1420, $item['mobile_image']);
				$tablet_portrait    	= validateImage(1024, 1370, $item['tablet_portrait']);
				$tablet_landscape   	= validateImage(1370, 1024, $item['tablet_landscape']);
				$desktop_image      	= validateImage(1920, 1000, $item['desktop_image']);
				$image_alt          	= validateImageAlt($item['desktop_image']);
				$banner_heading_level 	= '';
				$banner_heading 		= '';
				$banner_button 			= '';
				$banner_heading_level 	= $item['banner_heading_level'];
				$banner_heading       	= $item['banner_heading'];
				$banner_button       	= $item['banner_button'];
				$video_block 			= '';
				$video_link_mobile 		= '';
				$video_link_desktop 	= $item['video_link'];
				$video_link_mobile 		= $item['video_link_mobile'];

				if ( $video_link_desktop || $video_link_mobile ){
					$video_block = '<video loop muted playsinline data-link="'.$video_link_desktop.'" data-link-mobile="'.$video_link_mobile.'" data-id="'.$key.'"></video>';
				}

				$heading_html = '';
				if ($banner_heading && $banner_heading_level) {
					$heading_html = '<' . $banner_heading_level . ' class="title">' . $banner_heading . '</' . $banner_heading_level . '>';
				}elseif ( is_main_site() ){
					// Falling back to the page title is main-site behaviour. Other
					// sites in the network leave the hero heading empty when no banner
					// heading is set, instead of printing the page name.
					if (is_product_category()) {
						$heading_html = '<h1 class="title">' . single_term_title('', false) . '</h1>';
					} else {
						$heading_html = '<h1 class="title">' . get_the_title() . '</h1>';
					}
				}

				$button_html = '';
				if ($banner_button['text'] && $banner_button['link']) {
					$button_html = '<a href="' . $banner_button['link'] . '" class="banner-button">' . $banner_button['text'] . '</a>';
				}
			}else{
				$mobile_image        	= validateImage(800, 1000, $item['mobile_image']);
				$tablet_portrait    	= validateImage(1024, 500, $item['tablet_portrait']);
				$tablet_landscape   	= validateImage(1370, 600, $item['tablet_landscape']);
				$desktop_image      	= validateImage(1920, 650, $item['desktop_image']);
				$image_alt          	= validateImageAlt($item['desktop_image']);
				$banner_heading_level 	= '';
				$banner_heading 		= '';
				$banner_button 			= '';
				$banner_heading_level 	= $item['banner_heading_level'];
				$banner_heading       	= $item['banner_heading'];
				$banner_button       	= $item['banner_button'];
				$video_block			= '';
				$video_link_mobile		= '';
				$video_link_desktop 	= $item['video_link'];
				$video_link_mobile 		= $item['video_link_mobile'];

				if ( $video_link_desktop || $video_link_mobile ){
					$video_block = '<video loop muted playsinline data-link="'.$video_link_desktop.'" data-link-mobile="'.$video_link_mobile.'" data-id="'.$key.'"></video>';
				}

				$heading_html = '';
				if ($banner_heading && $banner_heading_level) {
					$heading_html = '<' . $banner_heading_level . ' class="title">' . $banner_heading . '</' . $banner_heading_level . '>';
				}else{
					if (is_product_category()) {
						$heading_html = '<h1 class="title">' . single_term_title('', false) . '</h1>';
					} else {
						$heading_html = '<h1 class="title">' . get_the_title() . '</h1>';
					}
				}

				$button_html = '';
				if ($banner_button['text'] && $banner_button['link']) {
					$button_html = '<a href="' . $banner_button['link'] . '" class="banner-button">' . $banner_button['text'] . '</a>';
				}
			}
			if ( $key == 0 ){
				$first_slide .= '
				<div class="item">
					<picture>
                        <source media="(max-width:767px)" srcset="'.$mobile_image.'">
                        <source media="(max-width:991px)" srcset="'.$tablet_portrait.'">
                        <source media="(max-width:1199px)" srcset="'.$tablet_landscape.'">
                        <img src="'.$desktop_image.'" alt="'.$image_alt.'">
                    </picture>
					'.$video_block.'
					<div class="banner-content">
						'.$heading_html.'
						'.$button_html.'
					</div>
				</div>
				';
			}else{
			}
			$rest_of_slide .= '
			<div class="item">
				<picture>
                        <source media="(max-width:767px)" srcset="'.$mobile_image.'">
                        <source media="(max-width:991px)" srcset="'.$tablet_portrait.'">
                        <source media="(max-width:1199px)" srcset="'.$tablet_landscape.'">
                        <img src="'.$desktop_image.'" alt="'.$image_alt.'">
                    </picture>
				'.$video_block.'
				<div class="banner-content">
					'.$heading_html.'
					'.$button_html.'
				</div>
			</div>
			';
		}
	}
?>

<?php 
	$nav_class 		= ( is_front_page() ) ? 'home-page' : 'inner-page';
	$visit_button 	= get_field('visit_button', 'option');
	$zz_banner 		= get_field('zz_banner');
?>

<header>
	<div class="navigation <?php echo $nav_class.' '.$banner_class,' '.$zz_banner; ?>">
		<!-- Desktop Menu -->
		<?php
			wp_nav_menu(array(
				'menu_class' => 'sm sm-simple ',
				'menu_id' => 'desktop-menu',
				'container' => '',
				'theme_location' => 'desktop_menu'
			));
		?>

		<!-- Logo -->
		<?php if ($header_logo) : ?>
			<a href="<?php echo get_site_url(); ?>" class="site-logo black">
				<img src="<?php echo $header_logo['url']; ?>" alt="<?php echo $header_logo['alt']; ?>">
			</a>
		<?php endif; ?>

		<?php if ($header_logo_white) : ?>
			<a href="<?php echo get_site_url(); ?>" class="site-logo white">
				<img src="<?php echo $header_logo_white['url']; ?>" alt="<?php echo $header_logo_white['alt']; ?>">
			</a>
		<?php endif; ?>

		<?php
			wp_nav_menu(array(
				'menu_class' => 'sm sm-simple ',
				'menu_id' => 'desktop-menu',
				'container' => '',
				'theme_location' => 'desktop_menu'
			));
		?>
		
		<!-- Search -->
		<div class="search-area">
			<div class="search-button">
				<svg class="searchicon">
					<use xlink:href="#searchicon"></use>
				</svg>
			</div>
			<div class="search-bar">
				<form action="<?php echo esc_url(home_url('/')); ?>" method="get">
					<input type="search" name="s" id="search" value="<?php echo get_search_query(); ?>" placeholder="Search products..." aria-label="search-input"/>
					<input type="hidden" name="post_type" value="product">
					<div class="submit-btn">
						<label>
							<input type="submit" id="searchsubmit" value="">
							<svg class="searchicon">
								<use xlink:href="#searchicon"></use>
							</svg>
						</label>
					</div>
				</form>
			</div>
		</div>

		<!-- Cart -->
		<div class="ant-cart-widget">
			<?php 
				echo do_shortcode("[woo_cart_but]");
			?>
		</div>

		<!-- User -->
		<a href="<?php echo get_permalink( wc_get_page_id( 'myaccount' ) ); ?>" class="account-link">
			<svg>
				<use xlink:href="#user"></use>
			</svg>
		</a>

		<!-- Mobile Menu -->
		<input id="main-menu-state" type="checkbox" />
		<label class="main-menu-btn" for="main-menu-state">
			<span class="main-menu-btn-icon"></span>
		</label>
		<?php
			wp_nav_menu(array(
				'menu_class' => 'sm sm-simple',
				'menu_id' => 'mobile-menu',
				'container' => '',
				'theme_location' => 'mobile_menu'
			));
		?>
	</div>

	<?php
		// The scroll-hint gif belongs to the main site's hero only. Rendering it
		// conditionally rather than hiding it with CSS keeps other sites in the
		// network from downloading the gif at all.
		if ( is_front_page() && is_main_site() ) :
	?>
		<div class="gif">
			<img src="/wp-content/themes/koya/images/banner-arr.gif" alt="Scroll Image">
		</div>
	<?php endif; ?>

	<div class="main-banner owl-carousel <?php echo $nav_class; ?> <?php echo $zz_banner; ?>" style="display: block !important;">
		<?php echo $first_slide; ?>
	</div>
</header>

<script>
	var rest_of_slide = <?php echo json_encode($rest_of_slide); ?>;
</script>
