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

$profile_id    = $args['profile_id'] ?? gigneo_active_profile_id();
$languages     = gigneo_post_meta( $profile_id, '_gigneo_pm_languages' );
$languages     = ! empty( $languages ) ? $languages : array();
$language_list = gigneo_term_list( array( 'taxonomy' => 'gigneo_language' ), false );
$levels        = gigneo_language_levels( false );
?>
<div id="gn-profile-languages" class="gn-setting-section">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Languages', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-modal-toggle="gn-edit-profile-languages">
			<i class="hi hi-pencil-edit" aria-hidden="true"></i>
		</button>
	</div>
	<?php if ( ! empty( $english_level ) || ! empty( $languages ) ) { ?>
		<div class="gn-body">
			<ul class="gn-profile-language-list gn-language-cards">
				<?php
				if ( ! empty( $languages ) ) {
					foreach ( $languages as $language ) {
						$lang_name  = isset( $language['name'] ) && isset( $language_list[ $language['name'] ] ) ? $language_list[ $language['name'] ] : '';
						$lang_level = isset( $language['level'] ) && isset( $levels[ $language['level'] ] ) ? $levels[ $language['level'] ] : '';
						if ( ! empty( $lang_name ) && ! empty( $lang_level ) ) {
							?>
						<li class="gn-language">
							<?php echo esc_html( $lang_name ); ?><span class="gn-level">(<?php echo esc_html( $lang_level ); ?>)</span>
						</li>
							<?php
						}
					}
				}
				?>
			</ul>
		</div>
	<?php } ?>
	<!--Edit Languages Modal-->
	<div id="gn-edit-profile-languages" class="gn-modal-wrapper gn-profile-setting-modal gn-edit-profile-languages">
		<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__( 'Languages', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your spoken languages.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-languages" 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="row g-4 align-items-end">
									<div class="col-md-6">
										<div class="gn-form-field gn-select2">
											<label for="gn-language-name"><?php echo esc_html__( 'Language', 'gigneo' ); ?></label>
											<select id="gn-language-name" name="language_name" placeholder="<?php echo esc_html__( 'Language', 'gigneo' ); ?>">
												<?php
												if ( ! empty( $language_list ) ) {
													foreach ( $language_list as $lang_slug => $lang_name ) {
														?>
														<option value="<?php echo esc_attr( $lang_slug ); ?>" <?php selected( in_array( $lang_slug, array_column( $languages, 'name' ), true ) ); ?>><?php echo esc_html( $lang_name ); ?></option>
														<?php
													}
												}
												?>
											</select>
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field gn-select2">
											<label for="gn-language-level"><?php echo esc_html__( 'Level', 'gigneo' ); ?></label>
											<select id="gn-language-level" name="language_level" placeholder="<?php echo esc_html__( 'Select Level', 'gigneo' ); ?>">
												<?php
												if ( ! empty( $levels ) ) {
													foreach ( $levels as $level_slug => $level_name ) {
														?>
													<option value="<?php echo esc_attr( $level_slug ); ?>" <?php selected( in_array( $level_slug, array_column( $languages, 'level' ), true ) ); ?>><?php echo esc_html( $level_name ); ?></option>
														<?php
													}
												}
												?>
											</select>
										</div>
									</div>
									<div class="col-md-12">
										<button id="gn-add-language-btn" type="button" class="gn-link gn-link-primary">
											<i class="hi hi-plus" aria-hidden="true"></i>
											<?php echo esc_html__( 'Add language', 'gigneo' ); ?>
										</button>
									</div>
								</div>
							</fieldset>
							<ul class="gn-repeater-tags">
							<?php
							foreach ( $languages as $language ) {
								$lang_name  = isset( $language['name'] ) && isset( $language_list[ $language['name'] ] ) ? $language_list[ $language['name'] ] : '';
								$lang_level = isset( $language['level'] ) && isset( $levels[ $language['level'] ] ) ? $levels[ $language['level'] ] : '';
								if ( ! empty( $lang_name ) && ! empty( $lang_level ) ) {
									?>
										<li id="gn-language-tag-<?php echo esc_attr( $language['name'] ); ?>" class="gn-tag">
											<div class="gn-tag-info">
												<h6 class="gn-name"><?php echo esc_html( $lang_name ); ?></h6>
												<p class="gn-level"><?php echo esc_html( $lang_level ); ?></p>
												<input type="hidden" name="languages[<?php echo esc_attr( $language['name'] ); ?>][name]" value="<?php echo esc_attr( $language['name'] ); ?>">
												<input type="hidden" name="languages[<?php echo esc_attr( $language['name'] ); ?>][level]" value="<?php echo esc_attr( $language['level'] ); ?>">
											</div>
											<span class="gn-remove-tag">
												<i class="hi hi-x-mark" aria-hidden="true"></i>
											</span>
										</li>
									<?php
								}
							}
							?>
							</ul>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="languages">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-languages"><?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>
