gallery.php

<?php
/*
 * Template Name: Gallery
 */
get_header(); ?>

	<section class="gallery-search">

		<div class="row">

			<div class="columns-7 right-1">

				<?php while(have_posts()): the_post(); ?>

					<?php the_content(); ?>

				<?php endwhile; ?>

			</div>

			<div class="columns-3 right-1">

				<ul class="gallery-filters">

					<li class="filter-location">

						<label>Service Category</label>

						<select name="service-parent" id="service-parent">

							<option value=""></option>

							<?php 
								$filter_services = get_terms(
									array(
										'taxonomy' => 'gallery-types',
										'parent' => 0
									)
								); 
								foreach($filter_services as $filter_service):
							?>

								<?php if(isset($_GET['location']) && $_GET['location'] == $filter_service->slug): ?>
									
									<option selected value="<?php echo $filter_service->slug; ?>"><?php echo $filter_service->name; ?></option>

								<?php else: ?>

									<option value="<?php echo $filter_service->slug; ?>"><?php echo $filter_service->name; ?></option>

								<?php endif; ?>

							<?php endforeach; ?>

						</select>

					</li>

					<li class="filter-location">

						<label>Service</label>

						<select name="service-child" id="service-child">

						</select>

					</li>

					<li class="filter-keyword">

						<label>Keywords</label>

						<div class="input-holder">

							<?php if( isset( $_GET['keyword']) && !empty( $_GET['keyword'])): ?>

								<input type="text" name="keyword" value="<?php echo $_GET['keyword']; ?>" />

							<?php else: ?>

								<input type="text" name="keyword" min="1" max="100" />

							<?php endif; ?>

						</div>

					</li>

					<li>
						<div class="filter-submit">
							<input class="button" type="submit" value="Search" />
						</div>
					</li>

				</ul>

			</div>

		</div>

	</section>	

	<section class="gallery-grid">

		<div class="row">

			<div class="columns-12">

				<ul class="block-grid-3">

					<?php
						// if city is found and set
						if( isset( $_GET['service-child'] ) && !empty( $_GET['service-child'] ) ) {
							$tax_query[] = array(
								'taxonomy' => 'gallery-types',
								'field' => 'slug',
								'terms' => $_GET['service-parent']
							);
						}

						if( isset( $_GET['keyword']) && !empty( $_GET['keyword'])) {
							$keyword_query = $_GET['keyword'];
						}


						$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
						$second = array(
							'tax_query' => $tax_query,
							'orderby' => 'name',
							'order' => 'ASC',
							'paged' => $paged,
							's' => $keyword_query,
						);
						$second_query = get_query('galleries', 12, $second);
						if($second_query->have_posts()): while($second_query->have_posts()): $second_query->the_post();
					?>

						<li>

							<?php the_post_thumbnail('gallery-landing'); ?>

							<p><?php the_field('image_caption'); ?></p>

						</li>

					<?php endwhile; else: ?>

						<li class="no-results">Sorry, but no results were found.</li>

					<?php endif; ?>

				</ul>

			</div>

		</div>

	</section>

	<section class="pagination-container">

		<div class="row">

			<div class="columns-10 column-center">

				<?php forge_page_navi('','',$second_query); ?>

			</div>

		</div>

	</section>

	<?php wp_reset_query(); ?>


	<script>

		jQuery(document).ready(function($) {

			// Initializing arrays with city names.
			<?php 
				foreach($filter_services as $filter_service): 
					$top_var = $filter_service->slug;
					$top_var = str_replace("-", "", $top_var);

					$child_terms = get_terms(
						array(
							'taxonomy' => 'gallery-types',
							'parent' => $filter_service->term_id,
						)
					);
			?>

				var <?php echo $top_var; ?> = [

					<?php 
						foreach($child_terms as $child_term): 
							$display = $child_term->name;
							$value = $child_term->slug;
					?>

						{ display: "<?php echo $display; ?>", value: "<?php echo $value; ?>" },

					<?php endforeach; ?>

				];

			<?php endforeach; ?>


			// Function executes on change of first select option field.
			$("#service-parent").change(function() {
				var select = $("#service-parent option:selected").val();

				switch (select) {

					<?php 
						foreach($filter_services as $filter_service): 
							$top_var = $filter_service->slug;
							$top_var_compressed = str_replace("-", "", $top_var);
					?>

						case "<?php echo $top_var_compressed; ?>":
							city(<?php echo $top_var; ?>);
						break;

					<?php endforeach; ?>

					default:
						$("#service-child").empty();
					break;
				}
			});

			function city(arr) {
				$("#service-child").empty(); //To reset cities

				$(arr).each(function(i) { //to list cities
					$("#service-child").append("<option value=\"" + arr[i].value + "\">" + arr[i].display + "</option>")
				}); 
			}

		});

	</script>
		
<?php get_footer(); ?>