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

$profile_id = $args['profile_id'] ?? gigneo_active_profile_id();
$faq        = gigneo_post_meta( $profile_id, '_gigneo_pm_faqs' );
?>
<div id="gn-profile-faqs" class="gn-setting-section gn-profile-faqs-list">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'FAQs', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-fields="" data-gn-previews="" data-gn-modal-toggle="gn-edit-profile-faq">
			<i class="hi hi-plus" aria-hidden="true"></i>
			<?php echo esc_html__( 'Add', 'gigneo' ); ?>
		</button>
	</div>
	<div class="gn-body">
		<?php if ( ! empty( $faq ) ) { ?>
		<ul class="gn-info-list">
				<?php
				foreach ( $faq as $key => $faq_item ) {
					$faq_question = ! empty( $faq_item['question'] ) ? $faq_item['question'] : '';
					$faq_answer   = ! empty( $faq_item['answer'] ) ? $faq_item['answer'] : '';

					if ( empty( $faq_question ) || empty( $faq_answer ) ) {
						continue;
					}

					$fields_data = array(
						'faq_id'       => esc_attr( $key ),
						'faq_question' => esc_attr( $faq_question ),
						'faq_answer'   => esc_attr( $faq_answer ),
					);

					?>
					<li class="gn-info-list-item">
						<div class="gn-info">
							<h4 class="gn-title"><?php echo esc_html( $faq_question ); ?></h4>
						</div>
						<div class="gn-actions">
							<button class="gn-btn gn-edit-profile-detail" data-gn-fields="<?php echo esc_attr( wp_json_encode( $fields_data ) ); ?>" data-gn-modal-toggle="gn-edit-profile-faq">
								<i class="hi hi-pencil-edit" aria-hidden="true"></i>
							</button>
							<button class="gn-btn gn-delete-profile-detail" data-gn-type="faq" data-gn-id="<?php echo esc_attr( $key ); ?>">
								<i class="hi hi-trash" aria-hidden="true"></i>
							</button>
						</div>
					</li>
				<?php } ?>
			</ul>
			<?php
		} else {
			$not_found_args = array(
				'image'       => false,
				'title'       => esc_html__( 'No questions', 'gigneo' ),
				'description' => esc_html__( 'Add frequently asked questions to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-faqs', $not_found_args );
		}
		?>
	</div>
	<!--Add/Edit Modal-->
	<div id="gn-edit-profile-faq" 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__( 'FAQ', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your frequently asked questions.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-faq" 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">
									<div class="col-md-12">
										<div class="gn-form-field">
											<label class="gn-required-field-label" for="gn-faq-question"><?php echo esc_html__( 'Question', 'gigneo' ); ?></label>
											<input id="gn-faq-question" class="gn-required-field" type="text" name="faq_question" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter question', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field">
											<label class="gn-required-field-label" for="gn-faq-answer"><?php echo esc_html__( 'Answer', 'gigneo' ); ?></label>
											<textarea id="gn-faq-answer" class="gn-required-field" name="faq_answer" autocomplete="off" rows="6" placeholder="<?php echo esc_attr__( 'Enter answer', 'gigneo' ); ?>"></textarea>
										</div>
									</div>
								</div>
								<input type="hidden" name="faq_id" value="">
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="faqs">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-faq"><?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>
