<?php 
	get_header(); 


	$title = get_field('blog_title', 'blog-page');
	$banner = get_field('banner', 'blog-page');
?>


<main class="content">
	<div class="blog-inner">
		<div class="blog-banner">
			<?php 

				$image = get_field('banner', 'blog-page');

				if( !empty($image) ): ?>

					<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

				<?php endif; ?>
		</div>
		<div class="container">


			<h1 class="blog-title"><?=$title?></h1>



			<?php     
				
				global $post_args;

				$one_post_args = array(
					'posts_per_page' => 1,
					'orderby' => 'post_date',
					'category_name' => $_GET['category'],
					'post_type' => 'article',
					'post_status' => 'publish',
					'order' => 'DESC',
					'paged' => get_query_var('paged') ?: 1,
				); 
				$one_posts = new WP_Query($one_post_args);
			?>

			<?php     
			
				global $post_args;

				$post_args = array(
					'posts_per_page'=> '6',
					'post_type' => 'article',
					'category_name' => $_GET['category'],
					'post_status' => 'publish',
					'order' => 'DESC',
					'paged' => get_query_var('paged') ?: 1,
					'offset' => 1,
				); 
				
				$posts = new WP_Query($post_args);
			?>

			<?php if ( $one_posts->have_posts() ) {
				while ( $one_posts->have_posts() ) {
				$one_posts->the_post();
				$current_post_link = get_permalink();
				$current_post_title = get_the_title();
				$blog_aim = get_field('blog_aim');
				$current_post_data = get_the_date( 'jS F, Y');
				?>
					<div class="row">
						<div class="col-lg-12">
							<div class="blog-list-item blog-list--last-article">
								<div class="blog-list--last-article-content">
									<a href="<?php echo get_permalink(); ?>" class="blog-list-item--title-link"><p class="blog-list-item--title"><?=$current_post_title?></p> </a>
									<div class="blog-block">
										<span class="article-span">
											<?php 
												$categories = get_the_category();
												if($categories){
													foreach($categories as $category) {
														$out .= '<a class="category-link" href="'.get_category_link($category->term_id ).'">' . "#" . $category->name . '</a> ';
													}
													echo trim($out);
											} ?>
										</span>
										<!--<div class="article-info">
											<span class="article-span--tags"><?=the_tags()?></span>
										</div>-->
									</div>
									<div class="post-info">
										<div class="post-info--image">
										<?php echo get_avatar( get_the_author_meta('user_email'), 'mm' ); ?>
										</div>

										<div class="post-info--text">
											<span class="article-span article-span--author-archive">by <?php the_author(); ?></span>	
											<div>											
												<span class="article-data"><?=$current_post_data?></span>
												<span class="article-data article-time-read">
													<?php echo reading_time_by_text(); ?>
												</span>
											</div>
										</div>
									</div>
									<?php rating(); ?>
									<div class="blog-list--last-article-img--mobile">
									<a href="<?php echo get_permalink(); ?>" class="blog-list-item--title-link"><img class="blog-list-item--img" src="<?php 
										if(has_post_thumbnail()) {
											the_post_thumbnail_url();
										} else {
											echo '' . get_bloginfo("template_url") . '/assets/images/img-default.png';
										}
										?>" alt="<?=$current_post_title?>">
									</a>
								</div>

									<?php the_content('Read more'); ?>
								</div>
								<div class="blog-list--last-article-img">
									<a href="<?php echo get_permalink(); ?>" class="blog-list-item--title-link"><img class="blog-list-item--img" src="<?php 
										if(has_post_thumbnail()) {
											the_post_thumbnail_url();
										} else {
											echo '' . get_bloginfo("template_url") . '/assets/images/img-default.png';
										}
										?>" alt="<?=$current_post_title?>">
									</a>
								</div>

							</div>
						</div>
					</div>
			<?php } 
			wp_reset_postdata();
			} ?>
			<!--<div class="row margin-bottom-50">
				<div class="col-lg-3">
					<form action="<?php echo site_url() ?>" method="GET" id="filter" name="myForm">
						<?php 
							if( $terms = get_terms( 'category', 'orderby=name', 'post_type=article' ) ) : 
								echo '<select name="categoryfilter" id="categoryfilter" onchange="myFunction()"><option>Select a category</option>';
								foreach ($terms as $term) :
									echo '<option name="category" value="' . $term->slug . '">' . $term->name . '</option>'; 
								endforeach;
								echo '</select>';
							endif;
						?>
					</form>
				</div>
			<div class="col-lg-9">
					<?php $sq = get_search_query() ? get_search_query() : __( 'Enter search terms&hellip;', 'base' ); ?>
					<form method="get" class="search-form" action="<?php echo home_url(); ?>" >
						<fieldset>
							<input type="search" class="form--field" name="s" placeholder="<?php echo $sq; ?>" value="<?php echo get_search_query(); ?>" />
							<input type="hidden" value="1" name="sentence" />
							<input type="hidden" value="article" name="post_type" />
							<input type="submit" class="search-form--submit" value="<?php _e( 'Search', 'base' ); ?>" />
						</fieldset>
					</form>
				</div>
			</div>-->

			<?php if ( have_posts() ) : ?>
				<div class="blog-list">
					<div class="row">
						<?php 
							while ($posts->have_posts()) :
								$posts->the_post();
								$current_post_link = get_permalink();
								$current_post_title = get_the_title();
								$blog_aim = get_field('blog_aim');
								$current_post_data = get_the_date( 'jS F, Y');
						?>
						<div class="col-lg-3">
							<div class="blog-list-item">
							<a href="<?php echo get_permalink(); ?>" class="blog-list-item--title-link-img"><img class="blog-list-item--img" src="<?php 
									if(has_post_thumbnail()) {
										the_post_thumbnail_url();
									} else {
										echo '' . get_bloginfo("template_url") . '/assets/images/img-default.png';
									}
									?>" alt="<?=$current_post_title?>"></a>

								<a href="<?=$current_post_link?>" class="blog-list-item--title-link"><p class="blog-list-item--title"><?=$current_post_title?></p> </a>
								<div class="blog-block">
										<span class="article-span">
											<?php 
												$links = array_map( function ( $category ) {
													return sprintf(
														'<a href="%s" class="category-link">#%s</a>', // Шаблон вывода ссылки
														esc_url( get_category_link( $category ) ), // Ссылка на рубрику
														esc_html( $category->name ) // Название рубрики
													);
												}, get_the_category() );
												
												echo implode( ', ', $links );
											 ?>
										</span>
										<!--<div class="article-info">
											<span class="article-span--tags"><?=the_tags()?></span>
										</div>-->
								</div>
								<div class="post-info">
									<div class="post-info--image">
									<?php echo get_avatar( get_the_author_meta('user_email'), 'mm' ); ?>
									</div>

									<div class="post-info--text">
										<span class="article-span article-span--author-archive">by <?php the_author(); ?></span>	
										<div>											
											<span class="article-data"><?=$current_post_data?></span>
											<span class="article-data article-time-read">
												<?php echo reading_time_by_text(); ?>
											</span>
										</div>
									</div>
								</div>
								<?php rating(); ?>

							</div>
						</div>
						<?php endwhile; ?>
						<?php 
							the_posts_pagination( array(
							) ); 
						?>
						<?php wp_reset_query(); ?>
					</div>
				</div>
			<?php endif; ?>
		</div>
	</div>
</main>
<script>
function myFunction() {
	let categoriesSelect = myForm.categoryfilter;
	 selection = document.getElementById("categoryfilter");
	 selectedOption = categoriesSelect.options[categoriesSelect.selectedIndex];

	 currentLocation = location.protocol + '//' + location.host + location.pathname //ссылка на текущую страницу
	 newCurrent = currentLocation.toString(); //перевод ссылки на текущую страницу в строку
	
	if( newCurrent.slice(-1) == '/' ) //если в строке последний слэш, удаляю его
	{
		var newUrl = newCurrent.substring(0, newCurrent.length - 1);
		console.log(newUrl);
	}
	
	let par = selectedOption.value;
	console.log(par);
	let params = new URLSearchParams('category', par);
	params.set('category', par);

	console.log(params.toString());

	let newUrl2 = newUrl + '?' + params.toString();
	//	let newUrl2 = newUrl + '?category=' + par;

	console.log(newUrl2);

	location = newUrl2;


}
</script>
<script>
function newFunc() {
	let selection = document.getElementById("categoryfilter");
		currentParams = window.location.href; //текущая страница
	console.log(currentParams);

	let url = new URL(currentParams); //урл
		searchParams = new URLSearchParams(url.search.slice(1)); //вырезать параметры
	console.log(searchParams);

	let par_string = searchParams.toString();
	console.log(par_string);

	let par = searchParams.get("category") ;
	console.log(par);
	for (let i = 0; i < selection.options.length; i++) {
		if (selection.options[i].value == par) {
			console.log(selection.options[i].value);
			selection.options[i].setAttribute('selected', true);
		}
	}
}

window.onload = newFunc;
</script>
<?php get_footer(); ?>