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

global $current_user;

$profile_id = $args['profile_id'] ?? gigneo_active_profile_id();
$skills     = gigneo_post_meta( $profile_id, '_gigneo_pm_skills' );
$skills     = ! empty( $skills ) ? $skills : array();
$skill_list = gigneo_term_list(
	array(
		'taxonomy' => 'gigneo_skill',
		'parent'   => 0,
	),
	false
);
?>
<div id="gn-profile-skills" class="gn-setting-section">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Skills', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-modal-toggle="gn-edit-profile-skills">
			<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( $skills ) && is_array( $skills ) ) { ?>
		<ul class="gn-profile-tag-list gn-tags">
			<?php
			foreach ( $skills as $skill ) {
				if ( ! isset( $skill_list[ $skill ] ) ) {
					continue;
				}
				?>
				<li class="gn-tag"><?php echo esc_html( $skill_list[ $skill ] ); ?></li>
				<?php
			}
			?>
		</ul>
			<?php
		} else {
			$not_found_args = array(
				'image'       => false,
				'title'       => esc_html__( 'No skills', 'gigneo' ),
				'description' => esc_html__( 'Add relevant skills to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-skills', $not_found_args );
		}
		?>
	</div>
	<!--Edit Personal Info Modal-->
	<div id="gn-edit-profile-skills" 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__( 'Skills', '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-skills" 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-skills" class="gn-required-field-label"><?php echo esc_html__( 'Add skill', 'gigneo' ); ?></label>
									<select id="gn-skills" name="skills[]" multiple="multiple" data-dynamic-tags="true" placeholder="<?php echo esc_html__( 'Select skill', 'gigneo' ); ?>">
										<?php
										if ( ! empty( $skill_list ) ) {
											foreach ( $skill_list as $skill_slug => $skill ) {
												?>
												<option value="<?php echo esc_attr( $skill_slug ); ?>" <?php selected( in_array( $skill_slug, $skills, true ) ); ?>>
													<?php echo esc_html( $skill ); ?>
												</option>
												<?php
											}
										}
										?>
									</select>
									<ul class="gn-select2-tags">
										<?php
										if ( ! empty( $skills ) && is_array( $skills ) ) {
											foreach ( $skills as $skill ) {
												if ( ! isset( $skill_list[ $skill ] ) ) {
													continue;
												}
												?>
												<li class="gn-selected-tag"><?php echo esc_html( $skill_list[ $skill ] ); ?><span data-value="<?php echo esc_attr( $skill ); ?>" 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="skill">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-skills"><?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>
