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

$profile_id        = $args['profile_id'] ?? gigneo_active_profile_id();
$date_format       = $args['date_format'] ?? get_option( 'date_format' );
$max_date          = $args['max_date'] ?? gigneo_datetime( gmdate( 'Y-m-d' ), 'Y-m-d' );
$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' );

$certificate = gigneo_post_meta( $profile_id, '_gigneo_pm_certificates' );
?>
<div id="gn-profile-certificates" class="gn-setting-section gn-profile-certificates-list">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Certificates', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-fields="" data-gn-previews="" data-gn-modal-toggle="gn-edit-profile-certificate">
			<i class="hi hi-plus" aria-hidden="true"></i>
			<?php echo esc_html__( 'Add', 'gigneo' ); ?>
		</button>
	</div>
	<div class="gn-body">
		<?php if ( ! empty( $certificate ) ) { ?>
		<ul class="gn-info-list">
				<?php
				foreach ( $certificate as $key => $certificate_item ) {
					$cert_title        = ! empty( $certificate_item['title'] ) ? $certificate_item['title'] : '';
					$cert_organisation = ! empty( $certificate_item['organisation'] ) ? $certificate_item['organisation'] : '';
					$cert_start_date   = ! empty( $certificate_item['start_date'] ) ? date_i18n( $date_format, strtotime( $certificate_item['start_date'] ), true ) : '';
					$cert_end_date     = ! empty( $certificate_item['end_date'] ) ? date_i18n( $date_format, strtotime( $certificate_item['end_date'] ), true ) : esc_html__( 'Continue', 'gigneo' );
					$cert_image        = ! empty( $certificate_item['image'] ) ? $certificate_item['image'] : '';

					if ( empty( $cert_title ) || empty( $cert_organisation ) ) {
						continue;
					}

					$fields_data = array(
						'certificate_id'           => esc_attr( $key ),
						'certificate_image'        => esc_attr( $cert_image ),
						'certificate_title'        => esc_attr( $cert_title ),
						'certificate_organisation' => esc_attr( $cert_organisation ),
						'certificate_start_date'   => esc_attr( $certificate_item['start_date'] ),
						'certificate_end_date'     => esc_attr( $certificate_item['end_date'] ),
					);

					$previews = array(
						'image' => array(
							'selector'  => '.gn-media-info > img',
							'attribute' => 'src',
							'value'     => esc_url( wp_get_attachment_url( $cert_image ) ),
						),
					);
					?>
					<li class="gn-info-list-item">
						<?php if ( ! empty( $cert_image ) ) { ?>
							<figure class="gn-image-box">
								<?php gigneo_attachment_image_src( $cert_image, 'thumbnail' ); ?>
							</figure>
						<?php } else { ?>
							<span class="gn-icon-box">
								<i class="hi hi-cube" aria-hidden="true"></i>
							</span>
						<?php } ?>
						<div class="gn-info">
							<?php if ( ! empty( $cert_title ) ) { ?>
								<h4 class="gn-title"><?php echo esc_html( $cert_title ); ?></h4>
							<?php } ?>
							<ul class="gn-meta">
								<li class="gn-organization">
									<i class="hi hi-building-office" aria-hidden="true"></i>
									<?php echo esc_html( $cert_organisation ); ?>
								</li>
								<?php
								if ( ! empty( $cert_start_date ) ) {
									?>
								<li class="gn-date">
									<i class="hi hi-calendar" aria-hidden="true"></i>
									<?php
									printf(
										// translators: 1: Start date, 2: End date.
										esc_html__( '%1$s - %2$s', 'gigneo' ),
										esc_html( $cert_start_date ),
										esc_html( $cert_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-previews="<?php echo esc_attr( wp_json_encode( $previews ) ); ?>" data-gn-modal-toggle="gn-edit-profile-certificate">
								<i class="hi hi-pencil-edit" aria-hidden="true"></i>
							</button>
							<button class="gn-btn gn-delete-profile-detail" data-gn-type="certificate" 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 certificates', 'gigneo' ),
				'description' => esc_html__( 'Add your certificates to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-certificates', $not_found_args );
		}
		?>
	</div>
	<!--Add/Edit Modal-->
	<div id="gn-edit-profile-certificate" 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__( 'Certificate', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your certificates.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-certificate" 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-certificate-title"><?php echo esc_html__( 'Title', 'gigneo' ); ?></label>
											<input id="gn-certificate-title" class="gn-required-field" type="text" name="certificate_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-certificate-organisation"><?php echo esc_html__( 'Company', 'gigneo' ); ?></label>
											<input id="gn-certificate-organisation" class="gn-required-field" type="text" name="certificate_organisation" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter organisation title', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field gn-datepicker">
											<label class="gn-required-field-label" for="gn-certificate-start-date"><?php echo esc_html__( 'Start date', 'gigneo' ); ?></label>
											<input id="gn-certificate-start-date" class="flatpickr-input gn-required-field" data-single="true" data-max-date="<?php echo esc_attr( $max_date ); ?>" type="hidden" name="certificate_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-certificate-end-date"><?php echo esc_html__( 'End date', 'gigneo' ); ?></label>
											<input id="gn-certificate-end-date" class="flatpickr-input" data-single="true" data-max-date="<?php echo esc_attr( $max_date ); ?>" type="hidden" name="certificate_end_date" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter end date', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field gn-media-upload">
											<label for="gn-certificate-image"><?php echo esc_html__( 'Certificate image', 'gigneo' ); ?></label>
											<input id="gn-certificate-image" type="hidden" name="certificate_image" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Select image', 'gigneo' ); ?>" />
											<div id="gn-certificate-image" class="gn-media-uploader gn-media-type-image">
												<span class="gn-media-info">
													<img src="" alt="<?php echo esc_attr__( 'Certificate image', 'gigneo' ); ?>">
													<button class="gn-media-uploader-remove" type="button"><i class="hi hi-x-mark" aria-hidden="true"></i></button>
												</span>
												<span class="gn-upload-info">
													<button class="gn-media-upload-toggle" type="button"><?php echo esc_html__( 'Select Image', 'gigneo' ); ?></button>
													<p class="gn-upload-description">
														<?php
														printf(
															// translators: %1$s: Valid extensions %2$s Maximum file size.
															esc_html__( '%1$s (Max. %2$s MB)', 'gigneo' ),
															esc_html( strtoupper( implode( ',', $images_extensions ) ) ),
															esc_html( $image_max_size )
														);
														?>
													</p>
												</span>
											</div>
										</div>
									</div>
								</div>
								<input type="hidden" name="certificate_id" value="">
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="certificates">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-certificate"><?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>
