<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Prevent direct access to the script.
}

global $current_user;

$profile_id    = $args['profile_id'] ?? gigneo_active_profile_id();
$categories    = gigneo_post_meta( $profile_id, '_gigneo_pm_categories' );
$categories    = ! empty( $categories ) ? $categories : array();
$category_list = gigneo_term_list(
	array(
		'taxonomy' => 'gigneo_facet',
		'parent'   => 0,
	),
	false
);
?>
<div id="gn-profile-categories" class="gn-setting-section">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Categories', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-modal-toggle="gn-edit-profile-categories">
			<i class="hi hi-pencil-edit" aria-hidden="true"></i>
			<?php echo esc_html__( 'Edit', 'gigneo' ); ?>
		</button>
	</div>
	<div class="gn-body">
		<?php if ( ! empty( $categories ) && is_array( $categories ) ) { ?>
		<ul class="gn-profile-category-list gn-tags">
			<?php
			foreach ( $categories as $category ) {
				if ( ! isset( $category_list[ $category ] ) ) {
					continue;
				}
				?>
				<li class="gn-tag"><?php echo esc_html( $category_list[ $category ] ); ?></li>
				<?php
			}
			?>
		</ul>
			<?php
		} else {
			$not_found_args = array(
				'image'       => false,
				'title'       => esc_html__( 'No categories', 'gigneo' ),
				'description' => esc_html__( 'Add relevant categories to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-categories', $not_found_args );
		}
		?>
	</div>
	<!--Edit Category Modal-->
	<div id="gn-edit-profile-categories" class="gn-modal-wrapper gn-profile-setting-modal">
		<div class="gn-modal-dialog">
			<div class="gn-modal-content">
				<div class="gn-modal-info">
					<div class="gn-modal-header">
						<h4 class="gn-title"><?php echo esc_html__( 'Categories', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your categories.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-categories" class="gn-modal-close">
							<i class="hi hi-x-mark" aria-hidden="true"></i>
						</button>
					</div>
					<form id="gn-save-profile-setting-form" class="gn-theme-form gn-save-profile-setting">
						<div class="gn-modal-body gn-custom-scrollbar">
							<fieldset class="gn-form-fields">
								<div class="gn-form-field gn-select2 gn-select2-dynamic-tags">
									<label for="gn-categories" class="gn-required-field-label"><?php echo esc_html__( 'Add category', 'gigneo' ); ?></label>
									<select id="gn-categories" name="categories[]" multiple="multiple" data-dynamic-tags="true" placeholder="<?php echo esc_html__( 'Select category', 'gigneo' ); ?>">
										<?php
										if ( ! empty( $category_list ) ) {
											foreach ( $category_list as $category_slug => $category ) {
												?>
												<option value="<?php echo esc_attr( $category_slug ); ?>" <?php selected( in_array( $category_slug, $categories, true ) ); ?>>
													<?php echo esc_html( $category ); ?>
												</option>
												<?php
											}
										}
										?>
									</select>
									<ul class="gn-select2-tags">
										<?php
										if ( ! empty( $categories ) ) {
											foreach ( $categories as $category ) {
												if ( ! isset( $category_list[ $category ] ) ) {
													continue;
												}
												?>
												<li class="gn-selected-tag"><?php echo esc_html( $category_list[ $category ] ); ?><span data-value="<?php echo esc_attr( $category ); ?>" class="gn-remove-tag"><i class="hi hi-x-mark" aria-hidden="true"></i></span></li>
												<?php
											}
										}
										?>
									</ul>
								</div>
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="categories">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-categories"><?php echo esc_html__( 'Close', 'gigneo' ); ?></button>
							<button type="submit" class="gn-btn gn-btn-primary"><?php echo esc_html__( 'Save', 'gigneo' ); ?></button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
