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

$profile_id        = $args['profile_id'] ?? gigneo_active_profile_id();
$max_date          = $args['max_date'] ?? gigneo_datetime( gmdate( 'Y-m-d' ), 'Y-m-d' );
$date_format       = $args['date_format'] ?? get_option( 'date_format' );
$images_extensions = $args['images_extensions'] ?? gigneo_option( '_gigneo_ts_video_extensions', array( 'mp4', 'avi', 'mov' ) );
$image_max_size    = $args['image_max_size'] ?? gigneo_option( '_gigneo_ts_image_max_size', '1' );

$experience = gigneo_post_meta( $profile_id, '_gigneo_pm_experience' );
?>
<div id="gn-profile-experience" class="gn-setting-section gn-setting-section-list<?php echo empty( $experience ) ? ' gn-empty' : ''; ?>">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Experience', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-fields="" data-gn-previews="" data-gn-modal-toggle="gn-edit-profile-experience">
			<i class="hi hi-plus" aria-hidden="true"></i>
			<?php echo esc_html__( 'Add', 'gigneo' ); ?>
		</button>
	</div>
	<div class="gn-body">
		<?php if ( ! empty( $experience ) ) { ?>
		<ul class="gn-info-list">
				<?php
				foreach ( $experience as $key => $experience_item ) {
					$exp_title      = ! empty( $experience_item['title'] ) ? $experience_item['title'] : '';
					$exp_company    = ! empty( $experience_item['company'] ) ? $experience_item['company'] : '';
					$exp_start_date = ! empty( $experience_item['start_date'] ) ? date_i18n( $date_format, strtotime( $experience_item['start_date'] ), true ) : '';
					$exp_end_date   = ! empty( $experience_item['end_date'] ) ? date_i18n( $date_format, strtotime( $experience_item['end_date'] ), true ) : esc_html__( 'Continue', 'gigneo' );

					if ( empty( $exp_title ) || empty( $exp_company ) ) {
						continue;
					}

					$fields_data = array(
						'experience_id'         => esc_attr( $key ),
						'experience_title'      => esc_attr( $exp_title ),
						'experience_company'    => esc_attr( $exp_company ),
						'experience_start_date' => esc_attr( $experience_item['start_date'] ),
						'experience_end_date'   => esc_attr( $experience_item['end_date'] ),
					);
					?>
					<li class="gn-info-list-item">
						<span class="gn-icon">
							<i class="hi hi-briefcase" aria-hidden="true"></i>
						</span>
						<div class="gn-info">
							<h4 class="gn-title"><?php echo esc_html( $exp_title ); ?></h4>
							<ul class="gn-meta">
								<li class="gn-company">
									<i class="hi hi-briefcase" aria-hidden="true"></i>
									<?php echo esc_html( $exp_company ); ?>
								</li>
								<?php if ( ! empty( $exp_start_date ) ) { ?>
								<li class="gn-date">
									<i class="hi hi-calendar" aria-hidden="true"></i>
									<?php
									printf(
										// translators: %1$s: Start date, %2$s: End date
										esc_html__( '%1$s - %2$s', 'gigneo' ),
										esc_html( $exp_start_date ),
										esc_html( $exp_end_date )
									);
									?>
								</li>
								<?php } ?>
							</ul>
						</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-experience">
								<i class="hi hi-pencil-edit" aria-hidden="true"></i>
							</button>
							<button class="gn-btn gn-delete-profile-detail" data-gn-type="experience" 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 experience', 'gigneo' ),
				'description' => esc_html__( 'Add your experience to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-experience', $not_found_args );
		}
		?>
	</div>
	<!--Add/Edit Modal-->
	<div id="gn-edit-profile-experience" 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__( 'Experience', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your work experience.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-experience" 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-experience-title"><?php echo esc_html__( 'Title', 'gigneo' ); ?></label>
											<input id="gn-experience-title" class="gn-required-field" type="text" name="experience_title" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter title name', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field">
											<label class="gn-required-field-label" for="gn-experience-company"><?php echo esc_html__( 'Company', 'gigneo' ); ?></label>
											<input id="gn-experience-company" class="gn-required-field" type="text" name="experience_company" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter company title', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field gn-datepicker">
											<label class="gn-required-field-label" for="gn-experience-start-date"><?php echo esc_html__( 'Start date', 'gigneo' ); ?></label>
											<input id="gn-experience-start-date" class="flatpickr-input gn-required-field" data-single="true" data-max-date="<?php echo esc_attr( $max_date ); ?>"  type="hidden" name="experience_start_date" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter start date', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field gn-datepicker">
											<label for="gn-experience-end-date"><?php echo esc_html__( 'End date', 'gigneo' ); ?></label>
											<input id="gn-experience-end-date" class="flatpickr-input" data-single="true" data-max-date="<?php echo esc_attr( $max_date ); ?>" type="hidden" name="experience_end_date" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter end date', 'gigneo' ); ?>">
										</div>
									</div>
								</div>
								<input type="hidden" name="experience_id" value="">
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="experiences">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-experience"><?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>
