<?php
/*
 * Template Name: Careers Listing Page
 * @package WordPress
 */

$filter_dept = (isset($_GET['filter_dept']) && $_GET['filter_dept']  !="" )? $_GET['filter_dept'] : null;
get_header(); ?>
<div class='container-fluid page-header'>
	<div class='row'>
		<?php if (has_post_thumbnail()){
			the_post_thumbnail('full',array('class'=>'img-responsive full-width'));
		}?>
		<h1 class="large"><?php the_title(); ?></h1>
	</div>
</div>
<div class='container'>
	<div class='row'>
		<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 page-wrap'>
			<main id="main" class="site-main" role="main">
				<div class="select-department">
					<h5>Departments</h5>
					<?php 


					$terms = get_terms( array(
						'taxonomy' => 'department',
						'hide_empty' => true,
					) );
					?>
                    <script>
    selectHandler = {
        clickCount : 0,
        action : function(select)
        {
            selectHandler.clickCount++;
            if(selectHandler.clickCount%2 == 0)
            {
                selectedValue = select.options[select.selectedIndex].value;
                selectHandler.check(selectedValue);
            }
        },
        blur : function() // needed for proper behaviour
        {
            if(selectHandler.clickCount%2 != 0)
            {
                selectHandler.clickCount--;
            }
        },
        check : function(value)
        {
           var f = document.getElementById('filterForm');
		f.submit();
        }
    }

</script>
					<form id='filterForm'>
						<select id="filterf" name='filter_dept' onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
							<option value=''>All</option>
							<?php foreach($terms as $term){ ?>
							<option value="<?php echo $term->term_id?>" <?php echo ($filter_dept == $term->term_id) ? "selected" : null ?>  ><?php echo $term->name ?></option>
							<?php } ?>
						</select>
					</form>
				</div>
				<?php
				$args = [
					'post_type'=>'job',
					'posts_per_page'=>-1,
					'post_status' => 'publish'
				];

				if(!is_null($filter_dept)){
					$args['tax_query'] = [
						[
							'taxonomy' => 'department',
							'field'    => 'id',
							'terms'    => $_GET['filter_dept'],
						]
					];
				}

				$jobs = new WP_Query($args);
				while ( $jobs->have_posts() ) : $jobs->the_post();
					?>
					<div class="item-wrap">
					<div class='row'>
					<div class='col-lg-6'>
					<h4><?php the_title() ?></h4>
				</div>
				<div class='col-lg-6 text-right'>
					<p><?php echo get_the_date() ?></p>
				</div>
			</div>
					<?php 
					the_excerpt();
				//if ( comments_open() || get_comments_number() ) {
				//	comments_template();
				//}?>
				<div class="job-apply-btn"><a href="<?php echo get_permalink()?>">APPLY</a></div>
					<hr style="width:100%;">
                    </div>
					<?php
				endwhile;
				?>
			</main><!-- .site-main -->
		</div>
	</div>
</div>

<script>
	function submitFilterForm(){
		var f = document.getElementById('filterForm');
		f.submit();
	}
 


</script>

<?php get_footer(); ?>