<?php


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

$e_search           = $args['search'] ?? '';
$e_location         = $args['location'] ?? '';
$e_categories       = $args['categories'] ?? array();
$e_skills           = $args['skills'] ?? array();
$e_online           = $args['online'] ?? '';
$e_verified         = $args['verified'] ?? '';
$e_rating           = $args['rating'] ?? '';
$e_sort             = $args['sort'] ?? '';
$e_orders_completed = $args['orders_completed'] ?? '';
$e_map_address      = $args['address'] ?? '';
$e_map_location     = $args['map_location'] ?? '';
$e_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-employer-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( $e_search ); ?>" 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 && ! $e_hide_map ? 'gn-map-location' : 'gn-location gn-select2' ); ?>">
					<?php if ( $is_map_enabled && ! $e_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( $e_map_address ); ?>">
							<input id="gn-map-location" type="hidden" name="map_location" value="<?php echo esc_attr( $e_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-employer-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( $e_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">
					<?php
					if ( ! empty( $category_list ) ) {
						?>
					<!--Categories-->
					<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__( 'Categories', '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-custom-scroll">
										<?php

											foreach ( $category_list as $category_slug => $category_name ) {
												?>
												<div class="gn-checkbox">
													<input type="checkbox" value="<?php echo esc_attr( $category_slug ); ?>" name="categories[]" id="gn-category-<?php echo esc_attr( $category_slug ); ?>"<?php checked( in_array( $category_slug, $e_categories, true ) ); ?>>
													<label for="gn-category-<?php echo esc_attr( $category_slug ); ?>">
														<span><?php echo esc_html( $category_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
					}
					?>
					<!--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">
										<?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, $e_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
					}
					?>
					<!--Rating-->
					<div class="gn-filter-dropdown-container gn-ratings-filter-dropdown">
						<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
							<?php echo esc_html__( 'Rating', '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">
										<?php
										foreach ( array( 5, 4, 3, 2, 1 ) as $star ) {
											?>
											<div class="gn-radio">
												<input type="radio" id="gn-rating-<?php echo esc_attr( $star ); ?>"
														name="rating" value="<?php echo esc_attr( $star ); ?>"
														<?php checked( (int) $e_rating === $star ); ?>>
												<label for="gn-rating-<?php echo esc_attr( $star ); ?>">
													<span class="gn-rating-stars">
													<?php
													for ( $i = 1; $i <= 5; $i++ ) {
														echo '<i class="hi hi-star-alt' . ( $i <= $star ? ' gn-filled' : '' ) . '" aria-hidden="true"></i>';
													}
													?>
													</span>
												</label>
											</div>
											<?php
										}
										?>
									</div>
								</fieldset>
							</div>
						</div>
					</div>
					<!--Orders Completed-->
					<div class="gn-filter-dropdown-container gn-orders-completed-filter-dropdown">
						<button class="gn-btn gn-btn-outline-grey gn-filter-dropdown-toggle" type="button">
							<?php echo esc_html__( 'Orders completed', '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">
										<?php foreach ( array( 1, 10, 50, 100 ) as $oc => $order_completed ) { ?>
											<div class="gn-radio">
												<input type="radio" id="gn-order-completed-<?php echo esc_html( $order_completed ); ?>" name="orders_completed" value="<?php echo esc_html( $order_completed ); ?>" <?php checked( intval( $e_orders_completed ), $order_completed ); ?>>
												<label for="gn-order-completed-<?php echo esc_html( $order_completed ); ?>">
													<?php
													printf(
													// translators: %s is No. of order completed.
														esc_html__( '%d+ Order completed', 'gigneo' ),
														esc_html( $order_completed )
													);
													?>
												</label>
											</div>
										<?php } ?>
									</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-online">
													<input type="checkbox" id="gn-online" name="online" <?php echo esc_attr( $e_online ? ' checked' : '' ); ?> value="1">
												</label>
												<span> <?php echo esc_html__( 'Online', '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( $e_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/employer/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-employer-archive-search-sort" name="sort" data-minimum-results-for-search="Infinity" placeholder="<?php echo esc_html__( 'Recommended', 'gigneo' ); ?>">
					<option value="recommended" <?php selected( $e_sort, 'recommended' ); ?>>
						<?php echo esc_html__( 'Recommended', 'gigneo' ); ?>
					</option>
					<option value="top_rated" <?php selected( $e_sort, 'top_rated' ); ?>>
						<?php echo esc_html__( 'Top rated', 'gigneo' ); ?>
					</option>
				</select>
			</div>
		</div>
	</form>
</div>