<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$search_val       = $args['search'] ?? '';
$location         = $args['location'] ?? '';
$category         = $args['category'] ?? '';
$sub_category     = $args['subcategory'] ?? '';
$specific_types   = $args['specific_types'] ?? array();
$skills           = $args['skills'] ?? array();
$budget_min       = $args['budget_min'] ?? '';
$budget_max       = $args['budget_max'] ?? '';
$experience_level = $args['experience_level'] ?? '';
$job_mode         = $args['job_mode'] ?? '';
$sort             = $args['sort'] ?? '';
$featured         = $args['featured'] ?? '';
$verified         = $args['verified'] ?? '';
$map_address      = $args['address'] ?? '';
$map_location     = $args['map_location'] ?? '';
$hide_map         = $args['hide_map'] ?? false;

$is_map_enabled  = apply_filters( 'gigneo_is_map_enabled', false );
$disabled_cities = gigneo_option( '_gigneo_ts_disable_cities', false );

$category_list = gigneo_term_list(
	array(
		'taxonomy' => 'gigneo_facet',
		'parent'   => 0,
	),
	false
);
$skill_list    = gigneo_term_list( array( 'taxonomy' => 'gigneo_skill' ), false );

?>
<div class="gn-archive-filters-wrapper gn-achive-filter-layout-1 gn-job-archive-filter">
	<form id="gn-archive-filters-form" method="GET" action="">
		<div class="gn-archive-search-wrapper">
			<fieldset class="gn-form-fields">
				<!--Keyword Search-->
				<div class="gn-form-field gn-keyword-search">
					<label for="gn-keyword-search">
						<?php echo esc_html__( 'Search by keywords', 'gigneo' ); ?>
					</label>
					<input type="search" name="search" value="<?php echo esc_attr( $search_val ); ?>" id="gn-keyword-search" autocomplete="false"
						placeholder="<?php echo esc_html__( 'Search by role, skills, or keywords', 'gigneo' ); ?>" />
				</div>
				<!--Location-->
				<div class="gn-form-field <?php echo esc_attr( $is_map_enabled && ! $hide_map ? 'gn-map-location' : 'gn-location gn-select2' ); ?>">
					<?php if ( $is_map_enabled && ! $hide_map ) { ?>
						<label for="gn-map-address" class="gn-required-field-label">
							<?php echo esc_html__( 'Map location', 'gigneo' ); ?>
						</label>
						<div class="gn-map-address-wrapper">
							<input id="gn-map-address" type="text" name="address" autocomplete="off"
									placeholder="<?php echo esc_attr__( 'Enter map location', 'gigneo' ); ?>" value="<?php echo esc_attr( $map_address ); ?>">
							<input id="gn-map-location" type="hidden" name="map_location" value="<?php echo esc_attr( $map_location ); ?>">
							<button type="button" class="gn-current-location"
									title="<?php echo esc_html__( 'Current location', 'gigneo' ); ?>">
								<i class="hi hi-viewfinder-circle" aria-hidden="true"></i>
							</button>
						</div>
						<?php
					} else {
						$locations            = array();
						$allowed_countries    = gigneo_allowed_countries();
						$location_placeholder = $disabled_cities ? esc_html__( 'Select country or state', 'gigneo' ) : esc_html__( 'Select country, state or city', 'gigneo' );

						foreach ( $allowed_countries as $country_code => $country_name ) {
							$states = WC()->countries->get_states( $country_code );

							if ( empty( $states ) ) {
								$locations[] = array(
									'type'  => 'country',
									'value' => $country_code,
									'label' => $country_name,
								);
								continue;
							}

							$locations[] = array(
								'type'  => 'country',
								'value' => $country_code,
								'label' => $country_name,
							);

							foreach ( $states as $state_code => $state_name ) {
								$state_label = $country_name . ', ' . $state_name;
								$state_value = $country_code . ':' . $state_code;

								$locations[] = array(
									'type'  => 'state',
									'value' => $state_value,
									'label' => $state_label,
								);

								if ( ! $disabled_cities ) {

									$cities = gigneo_country_state_cities( $state_value, false );

									foreach ( $cities as $city_slug => $city_name ) {
										$locations[] = array(
											'type'  => 'city',
											'value' => $city_slug,
											'label' => $state_label . ', ' . $city_name,
										);
									}
								}
							}
						}
						?>
						<label for="gn-location">
							<?php esc_html_e( 'Location', 'gigneo' ); ?>
						</label>
						<span class="gn-select">
							<select id="gn-location" name="location" data-dropdown-class="gn-job-archive-search-location"
									placeholder="<?php echo esc_attr( $location_placeholder ); ?>">
								<option value="">
									<?php echo esc_html( $location_placeholder ); ?>
								</option>
								<?php foreach ( $locations as $item ) { ?>
									<option value="<?php echo esc_attr( $item['value'] ); ?>" <?php selected( $location, $item['value'] ); ?>>
										<?php echo esc_html( $item['label'] ); ?>
									</option>
								<?php } ?>
							</select>
						</span>
					<?php } ?>
				</div>
				<button class="gn-btn gn-btn-primary" type="submit">
					<i class="hi hi-magnifying-glass" aria-hidden="true"></i>
					<?php echo esc_html__( 'Search', 'gigneo' ); ?>
				</button>
			</fieldset>
		</div>	
		<div class="gn-archive-filter-wrapper">
			<button id="gn-responsive-filter-toggle" type="button" class="gn-btn gn-btn-outline-grey">
				<?php echo esc_html__( 'Filters', 'gigneo' ); ?>
				<i class="hi hi-adjustments-horizontal" aria-hidden="true"></i>
			</button>
		
		<div class="gn-archive-filters">
			<div class="gn-head">
				<h5 class="gn-title"><?php echo esc_html__( 'Filters', 'gigneo' ); ?></h5>
				<button id="gn-responsive-filter-close" type="button" class="gn-btn gn-btn-outline-grey">
					<i class="hi hi-x-mark" aria-hidden="true"></i>
				</button>
			</div>
			<div class="gn-body">
				<!--Categories-->
				<?php if ( ! empty( $category_list ) ) { ?>
				<div class="gn-filter-dropdown-container gn-categories-filter-dropdown">
					<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
						<?php echo esc_html__( 'Category', 'gigneo' ); ?>
						<i class="hi hi-chevron-down" aria-hidden="true"></i>
					</button>
					<div class="gn-filter-dropdown">
						<div class="gn-body">
							<fieldset class="gn-form-fields gn-category-fields-wrapper">
								<div class="gn-form-field gn-category gn-select2">
									<label for="gn-category">
										<?php echo esc_html__( 'Category', 'gigneo' ); ?>
									</label>
									<select id="gn-category" name="category" data-dropdown-class="gn-job-archive-search-category"
										placeholder="<?php echo esc_html__( 'Select category', 'gigneo' ); ?>">
										<option value="">
											<?php echo esc_html__( 'Select category', 'gigneo' ); ?>
										</option>
										<?php
										if ( ! empty( $category_list ) && is_array( $category_list ) ) {
											foreach ( $category_list as $cat_slug => $cat_name ) {
												?>
												<option value="<?php echo esc_attr( $cat_slug ); ?>" <?php selected( $category, $cat_slug ); ?>>
													<?php echo esc_html( $cat_name ); ?>
												</option>
												<?php
											}
										}
										?>
									</select>
								</div>
								<div class="gn-form-field gn-subcategory gn-select2">
									<?php
									$sub_categories = array();
									foreach ( $category_list as $cat_slug => $cat_name ) {
										$cat_term = get_term_by( 'slug', $cat_slug, 'gigneo_facet' );
										if ( $cat_term && ! is_wp_error( $cat_term ) ) {
											$sub_category_list           = gigneo_term_list(
												array(
													'taxonomy' => 'gigneo_facet',
													'parent' => $cat_term->term_id,
												),
												false
											);
											$sub_categories[ $cat_slug ] = $sub_category_list;
											foreach ( $sub_category_list as $sub_cat_slug => $sub_cat ) {
												$sub_cat_term = get_term_by( 'slug', $sub_cat_slug, 'gigneo_facet' );
												if ( $sub_cat_term && ! is_wp_error( $sub_cat_term ) ) {
													$sub_categories[ $sub_cat_slug ] = gigneo_term_list(
														array(
															'taxonomy' => 'gigneo_facet',
															'parent' => $sub_cat_term->term_id,
														),
														false
													);
												}
											}
										}
									}

									$parent_category = get_term_by( 'slug', $category, 'gigneo_facet' );
									$child_category  = get_term_by( 'slug', $sub_category, 'gigneo_facet' );

									$sub_category_list = array();
									if ( ! empty( $parent_category->term_id ) ) {
										$sub_category_list = gigneo_term_list(
											array(
												'taxonomy' => 'gigneo_facet',
												'parent'   => $parent_category->term_id,
											),
											false
										);
									}

									$specific_type_list = array();
									if ( ! empty( $child_category->term_id ) ) {
										$specific_type_list = gigneo_term_list(
											array(
												'taxonomy' => 'gigneo_facet',
												'parent'   => $child_category->term_id,
											),
											false
										);
									}
									?>
									<label
										for="gn-subcategory"><?php echo esc_html__( 'Subcategory', 'gigneo' ); ?></label>
									<select id="gn-subcategory" name="subcategory" data-dropdown-class="gn-job-archive-search-subcategory"
										data-gn-categories="<?php echo esc_attr( wp_json_encode( $sub_categories ) ); ?>"
										placeholder="<?php echo esc_html__( 'Select sub category', 'gigneo' ); ?>">
										<?php
										if ( ! empty( $sub_category_list ) && is_array( $sub_category_list ) ) {
											foreach ( $sub_category_list as $sub_cat_slug => $sub_cat_name ) {
												?>
												<option value="<?php echo esc_attr( $sub_cat_slug ); ?>" <?php selected( $sub_category, $sub_cat_slug ); ?>>
													<?php echo esc_html( $sub_cat_name ); ?>
												</option>
												<?php
											}
										}
										?>
									</select>
								</div>
								<div
									class="gn-form-field gn-specific-types-field<?php echo esc_attr( empty( $specific_type_list ) || ! is_array( $specific_type_list ) ? ' gn-hide' : '' ); ?>">
									<h6 class="gn-field-label"><?php echo esc_html__( 'Specific types', 'gigneo' ); ?></h6>
									<div class="gn-specific-types">
										<?php
										if ( ! empty( $specific_type_list ) && is_array( $specific_type_list ) ) {
											foreach ( $specific_type_list as $specific_type_slug => $specific_type_name ) {
												?>
												<div class="gn-checkbox"><input type="checkbox"
														value="<?php echo esc_attr( $specific_type_slug ); ?>" <?php echo esc_attr( in_array( $specific_type_slug, $specific_types, true ) ? ' checked' : '' ); ?> name="specific_types[]"
														id="gn-specific-type-<?php echo esc_attr( $specific_type_slug ); ?>">
													<label
														for="gn-specific-type-<?php echo esc_attr( $specific_type_slug ); ?>"><span><?php echo esc_html( $specific_type_name ); ?></span></label>
												</div>
												<?php
											}
										}
										?>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="gn-footer">
							<button type="button" class="gn-btn gn-btn-outline-grey gn-btn-md gn-clear-filter">
								<?php echo esc_html__( 'Clear', 'gigneo' ); ?>
							</button>
							<button type="submit" class="gn-btn gn-btn-primary gn-btn-md gn-apply-filter">
								<?php echo esc_html__( 'Apply', 'gigneo' ); ?>
							</button>
						</div>
					</div>
				</div>
				<?php } ?>
				<!--Skills-->
				<?php if ( ! empty( $skill_list ) ) { ?>
				<div class="gn-filter-dropdown-container gn-skills-filter-dropdown">
					<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
						<?php echo esc_html__( 'Skills', 'gigneo' ); ?>
						<i class="hi hi-chevron-down" aria-hidden="true"></i>
					</button>
					<div class="gn-filter-dropdown">
						<div class="gn-body">
							<fieldset class="gn-form-fields">
								<div class="gn-form-field gn-custom-scroll">
									<h6 class="gn-field-label">
										<?php echo esc_html__( 'Skills', 'gigneo' ); ?>
									</h6>
									<?php
									foreach ( $skill_list as $skill_slug => $skill_name ) {
										?>
										<div class="gn-checkbox">
											<input type="checkbox" value="<?php echo esc_attr( $skill_slug ); ?>"
												name="skills[]" id="gn-skill-<?php echo esc_attr( $skill_slug ); ?>"
												<?php checked( in_array( $skill_slug, $skills, true ) ); ?>>  
											<label for="gn-skill-<?php echo esc_attr( $skill_slug ); ?>"><span>
													<?php echo esc_html( $skill_name ); ?>
												</span></label>
										</div>
										<?php
									}
									?>
								</div>
							</fieldset>
						</div>
						<div class="gn-footer">
							<button type="button" class="gn-btn gn-btn-outline-grey gn-btn-md gn-clear-filter">
								<?php echo esc_html__( 'Clear', 'gigneo' ); ?>
							</button>
							<button type="submit" class="gn-btn gn-btn-primary gn-btn-md gn-apply-filter">
								<?php echo esc_html__( 'Apply', 'gigneo' ); ?>
							</button>
						</div>
					</div>
				</div>
				<?php } ?>
				<!--Budget-->
				<div class="gn-filter-dropdown-container gn-price-filter-dropdown">
					<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
						<?php echo esc_html__( 'Budget', 'gigneo' ); ?>
						<i class="hi hi-chevron-down" aria-hidden="true"></i>
					</button>
					<div class="gn-filter-dropdown">
						<div class="gn-body">
							<fieldset class="gn-form-fields gn-nouislider">
								<div class="gn-form-field">
									<h6 class="gn-field-label">
										<?php echo esc_html__( 'Budget', 'gigneo' ); ?>
									</h6>
									<div class="gn-price-range-slider" data-gn-min="0" data-gn-max="5000"></div>
									<div class="gn-range-display">
										<div class="gn-range-min">
											<input id="gn-min-price" class="gn-min-price" value="<?php echo esc_attr( $budget_min ); ?>" name="budget_min"
													type="number" min="0" max="5000">
											<label class="gn-label" for="gn-min-price">
												<?php echo esc_html__( 'Min.', 'gigneo' ); ?>
											</label>
										</div>
										<div class="gn-range-max">
											<input id="gn-max-price" class="gn-max-price" value="<?php echo esc_attr( $budget_max ); ?>" name="budget_max"
													type="number" min="0" max="5000">
											<label class="gn-label" for="gn-max-price">
												<?php echo esc_html__( 'Max.', 'gigneo' ); ?>
											</label>
										</div>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="gn-footer">
							<button type="button" class="gn-btn gn-btn-outline-grey gn-btn-md gn-clear-filter">
								<?php echo esc_html__( 'Clear', 'gigneo' ); ?>
							</button>
							<button type="submit" class="gn-btn gn-btn-primary gn-btn-md gn-apply-filter">
								<?php echo esc_html__( 'Apply', 'gigneo' ); ?>
							</button>
						</div>
					</div>
				</div>
				<!--mode-->
				<div class="gn-filter-dropdown-container gn-mode-filter-dropdown">
					<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
						<?php echo esc_html__( 'Mode', 'gigneo' ); ?>
						<i class="hi hi-chevron-down" aria-hidden="true"></i>
					</button>
					<div class="gn-filter-dropdown">
						<div class="gn-body">
							<fieldset class="gn-form-fields">
							<div class="gn-form-field">
								<div class="gn-radio">
									<input type="radio" id="gn-mode-remote" name="mode" value="remote" <?php checked( $job_mode, 'remote' ); ?>>
									<label for="gn-mode-remote">
										<?php
										echo esc_html__( 'Remote', 'gigneo' );
										?>
									</label>
								</div>
								<div class="gn-radio">
									<input type="radio" id="gn-mode-onsite" name="mode" value="onsite" <?php checked( $job_mode, 'onsite' ); ?>>
									<label for="gn-mode-onsite">
										<?php
										echo esc_html__( 'Onsite', 'gigneo' );
										?>
									</label>
								</div>
							</div>
						</fieldset>
						</div>
					</div>
				</div>
				<!--Experience Level-->
				<div class="gn-filter-dropdown-container gn-experience-level-filter-dropdown">
					<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
						<?php echo esc_html__( 'Experience', 'gigneo' ); ?>
						<i class="hi hi-chevron-down" aria-hidden="true"></i>
					</button>
					<div class="gn-filter-dropdown">
						<div class="gn-body">
							<fieldset class="gn-form-fields">
								<div class="gn-form-field">
									<div class="gn-radio">
										<input type="radio" id="gn-experience-level-1" name="experience_level" value="entry" <?php checked( $experience_level, 'entry' ); ?>>
										<label for="gn-experience-level-1">
											<?php echo esc_html__( 'Entry level', 'gigneo' ); ?>
										</label>
									</div>
									<div class="gn-radio">
										<input type="radio" id="gn-experience-level-2" name="experience_level" value="intermediate" <?php checked( $experience_level, 'intermediate' ); ?>>
										<label for="gn-experience-level-2">
											<?php echo esc_html__( 'Intermediate', 'gigneo' ); ?>
										</label>
									</div>
									<div class="gn-radio">
										<input type="radio" id="gn-experience-level-3" name="experience_level" value="expert" <?php checked( $experience_level, 'expert' ); ?>>
										<label for="gn-experience-level-3">
											<?php echo esc_html__( 'Expert', 'gigneo' ); ?>
										</label>
									</div>
								</div>
							</fieldset>
						</div>
					</div>
				</div>
				<!--Filter Actions-->
					<div class="gn-filters-actions">
						<!--Clear Filter-->
						<button type="reset" class="gn-link gn-link-primary gn-clear-filters">
							<?php echo esc_html__( 'Clear filters', 'gigneo' ); ?>
						</button>
						<!--More Filters-->
						<div class="gn-filter-dropdown-container gn-more-filter-dropdown">
							<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
								<?php echo esc_html__( 'More', 'gigneo' ); ?>
								<i class="hi hi-adjustments-horizontal" aria-hidden="true"></i>
							</button>
							<div class="gn-filter-dropdown">
								<div class="gn-body">
									<fieldset class="gn-form-fields">
										<div class="gn-form-field">
											<div class="gn-switch">
												<label class="gn-checkbox" for="gn-featured">
													<input type="checkbox" id="gn-featured" name="featured" <?php echo esc_attr( $featured ? ' checked' : '' ); ?> value="1">
												</label>
												<span> <?php echo esc_html__( 'Featured', 'gigneo' ); ?></span>
											</div>
											<div class="gn-switch">
												<label class="gn-checkbox" for="gn-verified">
													<input type="checkbox" id="gn-verified" name="verified" <?php echo esc_attr( $verified ? ' checked' : '' ); ?> value="1">
												</label>
												<span> <?php echo esc_html__( 'Verified', 'gigneo' ); ?></span>
											</div>
										</div>
									</fieldset>
								</div>
							</div>
						</div>
					</div>
			</div>
			<div class="gn-footer">
				<!--Clear Filter-->
				<button type="reset" class="gn-link gn-link-primary gn-clear-filters">
					<?php echo esc_html__( 'Clear filters', 'gigneo' ); ?>
				</button>
			</div>
		</div>
		</div>
		<?php
		// Built active filter pills via template part
		gigneo_load_template( 'archive/job/parts/filter-pills', false, $args );
		?>
		<div class="gn-archive-sort-wrapper">
			<h6 class="gn-result-count">
				<?php
				printf(
					// translators: %s is found posts.
					esc_html__( '%s Results found', 'gigneo' ),
					esc_html( $args['found_posts'] ?? 0 )
				);
				?>
			</h6>
			<div class="gn-archive-sort gn-select2">
				<label for="gn-sort">
					<?php echo esc_html__( 'Sort by:', 'gigneo' ); ?>
				</label>
				<select id="gn-sort" data-dropdown-class="gn-job-archive-search-sort" name="sort" data-minimum-results-for-search="Infinity" placeholder="<?php echo esc_html__( 'Newest', 'gigneo' ); ?>">
					<option value="newest" <?php selected( $sort, 'newest' ); ?>>
						<?php echo esc_html__( 'Newest', 'gigneo' ); ?>
					</option>
					<option value="oldest" <?php selected( $sort, 'oldest' ); ?>>
						<?php echo esc_html__( 'Oldest', 'gigneo' ); ?>
					</option>
					<option value="rate_low_to_high" <?php selected( $sort, 'rate_low_to_high' ); ?>>
						<?php echo esc_html__( 'Rate low to high', 'gigneo' ); ?>
					</option>
					<option value="rate_high_to_low" <?php selected( $sort, 'rate_high_to_low' ); ?>>
						<?php echo esc_html__( 'Rate high to low', 'gigneo' ); ?>
					</option>
				</select>
			</div>
		</div>
	</form>
</div>