<?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' );


$portfolio           = gigneo_post_meta( $profile_id, '_gigneo_pm_portfolio' );
$tag_list            = gigneo_term_list( array( 'taxonomy' => 'gigneo_skill' ), false );
$document_extensions = gigneo_option( '_gigneo_ts_document_extensions', array( 'pdf', 'doc', 'ppt' ) );
$document_max_size   = gigneo_option( '_gigneo_ts_document_max_size', '5' );
?>
<div id="gn-profile-portfolio" class="gn-setting-section gn-setting-section-list">
	<div class="gn-head">
		<h3 class="gn-title"><?php echo esc_html__( 'Portfolio', 'gigneo' ); ?></h3>
		<button class="gn-link gn-link-primary" data-gn-fields="" data-gn-previews="" data-gn-modal-toggle="gn-edit-profile-portfolio">
			<i class="hi hi-plus" aria-hidden="true"></i>
			<?php echo esc_html__( 'Add', 'gigneo' ); ?>
		</button>
	</div>
	<div class="gn-body">
		<?php if ( ! empty( $portfolio ) ) { ?>
			<div class="gn-portfolio-cards">
				<div class="row g-4">
					<?php
					foreach ( $portfolio as $key => $portfolio_item ) {
						$portfolio_title            = ! empty( $portfolio_item['title'] ) ? $portfolio_item['title'] : '';
						$portfolio_role             = ! empty( $portfolio_item['role'] ) ? $portfolio_item['role'] : '';
						$portfolio_date             = ! empty( $portfolio_item['date'] ) ? date_i18n( $date_format, strtotime( $portfolio_item['date'] ), true ) : '';
						$portfolio_image            = ! empty( $portfolio_item['image'] ) ? $portfolio_item['image'] : '';
						$portfolio_type             = ! empty( $portfolio_item['type'] ) ? $portfolio_item['type'] : '';
						$portfolio_description      = ! empty( $portfolio_item['description'] ) ? $portfolio_item['description'] : '';
						$portfolio_preview_image    = ! empty( $portfolio_item['preview_image'] ) ? $portfolio_item['preview_image'] : '';
						$portfolio_preview_document = ! empty( $portfolio_item['preview_document'] ) ? $portfolio_item['preview_document'] : '';
						$portfolio_preview_video    = ! empty( $portfolio_item['preview_video'] ) ? $portfolio_item['preview_video'] : '';
						$portfolio_preview_link     = ! empty( $portfolio_item['preview_link'] ) ? $portfolio_item['preview_link'] : '';

						if ( empty( $portfolio_title ) ) {
							continue;
						}

						$fields_data = array(
							'portfolio_id'               => esc_attr( $key ),
							'portfolio_title'            => esc_attr( $portfolio_title ),
							'portfolio_role'             => esc_attr( $portfolio_role ),
							'portfolio_date'             => esc_attr( $portfolio_item['date'] ),
							'portfolio_feature_image'    => esc_attr( $portfolio_image ),
							'portfolio_type'             => esc_attr( $portfolio_type ),
							'portfolio_description'      => esc_attr( $portfolio_description ),
							'portfolio_preview_image'    => esc_attr( $portfolio_preview_image ),
							'portfolio_preview_document' => esc_attr( $portfolio_preview_document ),
							'portfolio_preview_video'    => esc_url( $portfolio_preview_video ),
							'portfolio_preview_link'     => esc_url( $portfolio_preview_link ),
						);

						$previews = array(
							'featured_image'   => array(
								'selector'  => '#gn-portfolio-featured-image .gn-media-info > img',
								'attribute' => 'src',
								'value'     => esc_url( wp_get_attachment_url( $portfolio_image ) ),
							),
							'preview_image'    => array(
								'selector'  => '#gn-portfolio-preview-image .gn-media-info > img',
								'attribute' => 'src',
								'value'     => esc_url( wp_get_attachment_url( $portfolio_preview_image ) ),
							),
							'preview_document' => array(
								'selector'  => '#gn-portfolio-preview-document .gn-media-info',
								'attribute' => 'data-src',
								'value'     => esc_url( wp_get_attachment_url( $portfolio_preview_document ) ),
							),
						);
						?>
						<div class="col-sm-6 col-md-4 col-lg-6 col-xl-4">
							<div class="gn-portfolio-item">
								<figure class="gn-image">
									<?php gigneo_attachment_image_src( $portfolio_image ); ?>
									<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-portfolio">
											<i class="hi hi-pencil-edit" aria-hidden="true"></i>
										</button>
										<button class="gn-btn gn-delete-profile-detail" data-gn-type="portfolio"
												data-gn-id="<?php echo esc_attr( $key ); ?>">
											<i class="hi hi-trash" aria-hidden="true"></i>
										</button>
									</div>
								</figure>
								<h4 class="gn-title"><?php echo esc_html( $portfolio_title ); ?></h4>
							</div>
						</div>
					<?php } ?>
				</div>
			</div>
			<?php
		} else {
			$not_found_args = array(
				'image'       => false,
				'title'       => esc_html__( 'No portfolio', 'gigneo' ),
				'description' => esc_html__( 'Add your portfolio to enhance your profile.', 'gigneo' ),
			);
			gigneo_not_found( 'gn-profile-portfolio', $not_found_args );
		}
		?>
	</div>
	<!--Add/Edit Modal-->
	<div id="gn-edit-profile-portfolio" 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__( 'Portfolio', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Manage or update your work portfolio.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-profile-portfolio" 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-portfolio-title"><?php echo esc_html__( 'Title', 'gigneo' ); ?></label>
											<input id="gn-portfolio-title" class="gn-required-field" type="text" name="portfolio_title" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter title', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field">
											<label class="gn-required-field-label" for="gn-portfolio-role"><?php echo esc_html__( 'Role', 'gigneo' ); ?></label>
											<input id="gn-portfolio-role" class="gn-required-field" type="text" name="portfolio_role" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter role', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-6">
										<div class="gn-form-field gn-datepicker">
											<label for="gn-portfolio-date"><?php echo esc_html__( 'Date', 'gigneo' ); ?></label>
											<input id="gn-portfolio-date" class="flatpickr-input" data-single="true" data-max-date="<?php echo esc_attr( $max_date ); ?>" type="hidden" name="portfolio_date" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter date', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field gn-media-upload">
											<label class="gn-required-field-label" for="gn-portfolio-feature-image"><?php echo esc_html__( 'Featured image', 'gigneo' ); ?></label>
											<input id="gn-portfolio-feature-image" class="gn-required-field" type="hidden" name="portfolio_feature_image" autocomplete="off" value="" />
											<div id="gn-portfolio-featured-image" class="gn-media-uploader gn-media-type-image">
												<span class="gn-media-info">
													<img src="" alt="<?php echo esc_attr__( 'Featured 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>
													<span 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 )
													);
													?>
													</span>
												</span>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field gn-select2">
											<label for="gn-portfolio-type"><?php echo esc_html__( 'Preview type', 'gigneo' ); ?></label>
											<select id="gn-portfolio-type" name="portfolio_type" placeholder="<?php echo esc_html__( 'Select type', 'gigneo' ); ?>" data-minimum-results-for-search="Infinity">
												<option value="image"><?php echo esc_html__( 'Image', 'gigneo' ); ?></option>
												<option value="document"><?php echo esc_html__( 'Document', 'gigneo' ); ?></option>
												<option value="video"><?php echo esc_html__( 'Video', 'gigneo' ); ?></option>
												<option value="link"><?php echo esc_html__( 'Link', 'gigneo' ); ?></option>
											</select>
										</div>
									</div>
									<div class="col-md-12 gn-portfolio-preview-type">
										<div class="gn-form-field gn-media-upload">
											<label for="gn-portfolio-preview-type-image"><?php echo esc_html__( 'Preview image', 'gigneo' ); ?></label>
											<input id="gn-portfolio-preview-type-image" type="hidden" name="portfolio_preview_image" autocomplete="off" value="" />
											<div id="gn-portfolio-preview-image" class="gn-media-uploader gn-media-type-image">
												<span class="gn-media-info">
													<img src="" alt="<?php echo esc_attr__( 'Preview 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>
													<span 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 )
														);
														?>
													</span>
												</span>
											</div>
										</div>
									</div>
									<div class="col-md-12 gn-portfolio-preview-type">
										<div class="gn-form-field gn-media-upload">
											<label for="gn-portfolio-preview-type-document"><?php echo esc_html__( 'Preview document', 'gigneo' ); ?></label>
											<input id="gn-portfolio-preview-type-document" type="hidden" name="portfolio_preview_document" autocomplete="off" value="" />
											<div id="gn-portfolio-preview-document" class="gn-media-uploader gn-media-type-document">
												<span class="gn-media-info" data-src="">
													<img src="<?php echo esc_url( GIGNEO_DIR_URL . 'assets/img/icon/document.png' ); ?>" alt="<?php echo esc_attr__( 'Document', '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 file', 'gigneo' ); ?></button>
													<span 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( ',', $document_extensions ) ) ),
															esc_html( $document_max_size )
														);
														?>
													</span>
												</span>
											</div>
										</div>
									</div>
									<div class="col-md-12 gn-portfolio-preview-type">
										<div class="gn-form-field">
											<label for="gn-portfolio-preview-type-video"><?php echo esc_html__( 'Preview video', 'gigneo' ); ?></label>
											<input id="gn-portfolio-preview-type-video" type="text" name="portfolio_preview_video" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter video URL', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12 gn-portfolio-preview-type">
										<div class="gn-form-field">
											<label for="gn-portfolio-preview-type-link"><?php echo esc_html__( 'Preview link', 'gigneo' ); ?></label>
											<input id="gn-portfolio-preview-type-link" type="text" name="portfolio_preview_link" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter custom link', 'gigneo' ); ?>">
										</div>
									</div>
								</div>
								<input type="hidden" name="portfolio_id" value="">
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="type" value="portfolio">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-profile-portfolio"><?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>
