<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

use Gigneo\Modules;

$p_id         = $args['p_id'] ?? '';
$current_step = $args['current_step'] ?? '';
$redirect_url = $args['redirect_url'] ?? '';

$manual_approval = gigneo_option( '_gigneo_ts_service_manually_approve' );
$gallery_limit   = gigneo_option( '_gigneo_ts_service_gallery_limit', 3 );
$document_limit  = gigneo_option( '_gigneo_ts_service_document_limit', 1 );
$gallery         = gigneo_post_meta( $p_id, '_gigneo_pm_gallery' );
$gallery         = ! empty( $gallery ) ? $gallery : array();
$gallery_count   = ! empty( $gallery ) ? count( $gallery ) : 0;
$placeholder_url = gigneo_placeholder_url();

$p_status         = get_post_status( $p_id );
$pm_status        = gigneo_post_meta( $p_id, '_gigneo_pm_status' );
$media_type       = gigneo_post_meta( $p_id, '_gigneo_pm_video_type' );
$intro_video      = gigneo_post_meta( $p_id, '_gigneo_pm_video' );
$intro_video_link = gigneo_post_meta( $p_id, '_gigneo_pm_video_link' );
$intro_video_url  = ! empty( $intro_video ) ? wp_get_attachment_url( $intro_video ) : '';
$video_mime_type  = ! empty( $intro_video ) ? get_post_mime_type( $intro_video ) : '';
$documents        = gigneo_post_meta( $p_id, '_gigneo_pm_documents' );
$documents        = ! empty( $documents ) ? $documents : array();

$images_extensions   = gigneo_option( '_gigneo_ts_image_extensions', array( 'jpg', 'jpeg', 'png', 'gif' ) );
$image_max_size      = gigneo_option( '_gigneo_ts_image_max_size', '1' );
$video_extensions    = gigneo_option( '_gigneo_ts_video_extensions', array( 'mp4', 'avi', 'mov' ) );
$video_max_size      = gigneo_option( '_gigneo_ts_video_max_size', '1' );
$document_extensions = gigneo_option( '_gigneo_ts_document_extensions', array( 'pdf', 'doc', 'ppt' ) );
$document_max_size   = gigneo_option( '_gigneo_ts_document_max_size', '5' );

$service_url = gigneo_dashboard_url( 'service', 'list' );

$intake_form_for = gigneo_option( '_gigneo_ts_intake_form_for', 'both' );
?>
<div id="gn-service-edit-media" class="gn-service-edit-step gn-service-edit-media <?php echo esc_attr( 'media' !== $current_step ? ' d-none' : '' ); ?>">
	<div class="row gy-4">
		<div class="col-lg-8 col-xl-9 order-2 order-lg-1">
			<form id="gn-service-form-media" class="gn-main gn-service-edit-form">
				<div class="gn-edit-service-section">
					<div class="gn-head">
						<div class="gn-heading-area">
							<h3 class="gn-title"><?php echo esc_html__( 'Media & attachments', 'gigneo' ); ?></h3>
							<p class="gn-description"><?php echo esc_html__( 'Specify the attributes included with this service.', 'gigneo' ); ?></p>
						</div>
					</div>
					<div class="gn-body">
						<div class="gn-edit-service-notice">
							<i class="hi hi-information-circle"></i>
							<p><?php echo esc_html__( 'To ensure compliance, only upload content you fully own or have the proper permissions or licenses to use.', 'gigneo' ); ?></p>
						</div>
					</div>
				</div>
				<!--Gallery-->
				<div class="gn-edit-service-section">
					<div class="gn-head">
						<div class="gn-heading-area">
							<h3 class="gn-title gn-required-field-label">
								<?php
								printf(
								// translators: %s: Gallery limit.
									esc_html__( 'Service Images (up to %s)', 'gigneo' ),
									esc_html( $gallery_limit )
								);
								?>
								</h3>
							<p class="gn-description"><?php echo esc_html__( 'Upload an images to highlight your service.', 'gigneo' ); ?></p>

						</div>
					</div>
					<div class="gn-body">
						<div class="gn-edit-media-content">
							<ul class="gn-service-media-list gn-service-media-gallery">
								<?php
								for ( $galler_index = 0; $galler_index < $gallery_limit; $galler_index++ ) {
									$gallery_attachment_id = $gallery[ $galler_index ] ?? '';
									?>
									<li class="gn-service-media gn-service-media-<?php echo esc_attr( $galler_index ); ?><?php echo esc_attr( empty( $gallery_attachment_id ) ? ' gn-service-media-placeholder' : '' ); ?>">
										<div class="gn-service-media-info">
											<figure class="gn-service-image">
												<?php gigneo_attachment_image_src( $gallery_attachment_id, 'large' ); ?>
											</figure>
											<input type="hidden" name="gigneo_pm_gallery[]" value="<?php echo esc_attr( $gallery_attachment_id ); ?>" id="gn-service-media-input-<?php echo esc_attr( $galler_index ); ?>"/>
											<div class="gn-service-media-action">
												<button type="button" class="gn-service-media-upload-toggle"><i class="hi hi-pencil-edit" aria-hidden="true"></i></button>
												<button type="button" class="gn-service-media-remove"><i class="hi hi-trash" aria-hidden="true"></i></button>
											</div>
										</div>
										<div class="gn-service-media-upload" id="gn-upload-service-gallery-<?php echo esc_attr( $galler_index ); ?>">
											<i class="hi hi-camera" aria-hidden="true"></i>
											<div class="gn-service-media-upload-info">
												<p class="gn-description">
													<?php
													printf(
													// translators: %1$s: Valid extensions %2$s Maximum file size %3$s Number of files.
														esc_html__( '%1$s (Max. %2$s MB)', 'gigneo' ),
														esc_html( strtoupper( implode( ',', $images_extensions ) ) ),
														esc_html( $image_max_size )
													);
													?>
												</p>
												<button class="gn-service-media-upload-toggle" type="button"><?php echo esc_html__( 'Select Image', 'gigneo' ); ?></button>
											</div>
										</div>
									</li>
									<?php
								}
								?>
							</ul>
						</div>
					</div>
				</div>
				<!--Video-->
				<div class="gn-edit-service-section">
					<div class="gn-head">
						<div class="gn-heading-area">
							<h3 class="gn-title"><?php echo esc_html__( 'Video', 'gigneo' ); ?></h3>
							<p class="gn-description"><?php echo esc_html__( 'Add a video to engage clients and boost your appeal.', 'gigneo' ); ?></p>
						</div>
						<div class="gn-actions">
							<div class="gn-radio-switch-btn">
								<label>
									<input type="radio" class="gn-service-video-type" name="gigneo_pm_video_type" value="video" <?php echo esc_attr( 'link' !== $media_type ? 'checked' : '' ); ?>>
									<span><?php echo esc_html__( 'Video', 'gigneo' ); ?></span>
								</label>
								<label>
									<input type="radio" name="gigneo_pm_video_type" class="gn-service-video-type" value="link" <?php echo esc_attr( 'link' === $media_type ? 'checked' : '' ); ?>>
									<span><?php echo esc_html__( 'Link', 'gigneo' ); ?></span>
								</label>
							</div>
						</div>
					</div>
					<div class="gn-body">
						<div class="gn-edit-media-content">
							<ul class="gn-service-media-list gn-service-media-video<?php echo esc_attr( 'link' === $media_type ? ' d-none' : '' ); ?>">
								<li class="gn-service-media<?php echo esc_attr( empty( $intro_video ) ? ' gn-service-media-placeholder' : '' ); ?>">
									<div class="gn-service-media-info">
										<video controls>
											<source src="<?php echo esc_url( $intro_video_url ); ?>" type="<?php echo esc_attr( $video_mime_type ); ?>"/>
										</video>
										<input type="hidden" name="gigneo_pm_video" value="<?php echo esc_attr( $intro_video ); ?>" id="gn-service-media-video-input"/>
										<div class="gn-service-media-action">
											<button type="button" class="gn-service-media-upload-toggle"><i class="hi hi-pencil-edit" aria-hidden="true"></i></button>
											<button type="button" class="gn-service-media-remove"><i class="hi hi-trash" aria-hidden="true"></i></button>
										</div>
									</div>
									<div class="gn-service-media-upload">
										<i class="hi hi-video-camera" aria-hidden="true"></i>
										<div class="gn-service-media-upload-info">
											<p class="gn-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( ',', $video_extensions ) ) ),
													esc_html( $video_max_size )
												);
												?>
											</p>
											<button class="gn-service-media-upload-toggle" type="button"><?php echo esc_html__( 'Select Video', 'gigneo' ); ?></button>
										</div>
									</div>
								</li>
							</ul>
							<div class="gn-service-video-link-wrapper<?php echo esc_attr( 'link' !== $media_type ? ' d-none' : '' ); ?>">
								<div class="gn-form-fields">
									<div class="gn-form-field">
										<label>
											<input id="gn-video-link" type="text" name="gigneo_pm_video_link" value="<?php echo esc_attr( $intro_video_link ); ?>" placeholder="Insert a video link here" />
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--Documents-->
				<div class="gn-edit-service-section">
					<div class="gn-head">
						<div class="gn-heading-area">
							<h3 class="gn-title">
								<?php
								printf(
								// translators: %s: Document limit.
									esc_html__( 'Documents (up to %s)', 'gigneo' ),
									esc_html( $document_limit )
								);
								?>
							</h3>
							<p class="gn-description"><?php echo esc_html__( 'Upload files to showcase your expertise and establish credibility.', 'gigneo' ); ?></p>
						</div>
					</div>
					<div class="gn-body">
						<div class="gn-edit-media-content">
							<ul class="gn-service-media-list gn-service-media-documents">
								<?php
								$doc_placeholder_url = GIGNEO_DIR_URL . 'assets/img/icon/document.png';
								for ( $doc_index = 0; $doc_index < $document_limit; $doc_index++ ) {
									$doc_attachment_name = '';
									$doc_attachment_id   = $documents[ $doc_index ] ?? '';
									if ( ! empty( $doc_attachment_id ) ) {
										$file_path           = get_attached_file( $doc_attachment_id );
										$doc_attachment_name = basename( $file_path );
									}
									?>
									<li class="gn-service-media gn-service-media-<?php echo esc_attr( $doc_index ); ?><?php echo esc_attr( empty( $doc_attachment_id ) ? ' gn-service-media-placeholder' : '' ); ?>">
										<div class="gn-service-media-info">
											<figure class="gn-service-image">
												<img src="<?php echo esc_url( $doc_placeholder_url ); ?>" alt="<?php echo esc_attr__( 'Document', 'gigneo' ); ?>">
												<figcaption class="gn-name"><?php echo esc_html( $doc_attachment_name ); ?></figcaption>
											</figure>
											<input type="hidden" name="gigneo_pm_documents[]" value="<?php echo esc_attr( $doc_attachment_id ); ?>" id="gn-service-media-input-<?php echo esc_attr( $doc_index ); ?>"/>
											<div class="gn-service-media-action">
												<button type="button" class="gn-service-media-upload-toggle"><i class="hi hi-pencil-edit" aria-hidden="true"></i></button>
												<button type="button" class="gn-service-media-remove"><i class="hi hi-trash" aria-hidden="true"></i></button>
											</div>
										</div>
										<div class="gn-service-media-upload" id="gn-upload-service-gallery-<?php echo esc_attr( $doc_index ); ?>">
											<i class="hi hi-arrow-up-tray" aria-hidden="true"></i>
											<div class="gn-service-media-upload-info">
												<p class="gn-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 )
													);
													?>
												</p>
												<button class="gn-service-media-upload-toggle" type="button"><?php echo esc_html__( 'Select Document', 'gigneo' ); ?></button>
											</div>
										</div>
									</li>
									<?php
								}
								?>
							</ul>
						</div>
					</div>
				</div>
				<!--Actions-->
				<div class="gn-edit-service-footer gn-actions">
					<button type="button" data-gn-step="media" data-gn-type="draft" data-gn-redirect-url="<?php echo esc_url( $redirect_url ); ?>" class="gn-btn gn-btn-outline-grey gn-service-save"><?php echo esc_html__( 'Save as draft', 'gigneo' ); ?></button>
					<button type="button" data-gn-step="media" data-gn-prev-step="details" class="gn-btn gn-btn-outline-grey gn-service-back">
						<?php echo esc_html__( 'Back', 'gigneo' ); ?>
					</button>
					<?php
					if ( in_array( 'intake_form', gigneo_active_modules(), true ) || 'job' === $intake_form_for ) {
						?>
						<button type="button" data-gn-step="media" data-gn-type="continue" data-gn-next-step="requirements" class="gn-btn gn-btn-primary gn-service-save">
							<?php echo esc_html__( 'Save & continue', 'gigneo' ); ?>
						</button>
					<?php } else { ?>
						<button type="button" data-gn-step="media" data-gn-type="<?php echo esc_attr( ( ( 'publish' === $pm_status && 'publish' !== $p_status ) || ( empty( $pm_status ) || 'rejected' === $pm_status ) ) ? 'publish' : 'redirect' ); ?>" data-gn-redirect-url="<?php echo esc_url( $redirect_url ); ?>" class="gn-btn gn-btn-primary gn-service-save">
							<?php echo esc_html__( 'Save', 'gigneo' ); ?>
						</button>
						<?php
					}
					?>
				</div>
			</form>
		</div>
		<div class="col-lg-4 col-xl-3 order-1 order-lg-2">
			<div class="gn-aside">
				<div class="gn-aside-content">
					<h4 class="gn-title"><?php echo esc_html__( 'Media guidelines:', 'gigneo' ); ?></h4>
					<div class="gn-aside-body">
						<p class="gn-description"><?php echo esc_html__( 'To showcase your expertise, please use high-quality images, videos, or documents.', 'gigneo' ); ?></p>
						<h4 class="gn-title"><?php echo esc_html__( 'What to avoid:', 'gigneo' ); ?></h4>
						<ul class="gn-ol-list">
							<li><p class="gn-description"><?php echo esc_html__( 'Low-resolution or unclear images', 'gigneo' ); ?></p></li>
							<li><p class="gn-description"><?php echo esc_html__( 'Overly cluttered images or excessive text', 'gigneo' ); ?></p></li>
							<li><p class="gn-description"><?php echo esc_html__( 'Work unrelated to the service you offer', 'gigneo' ); ?></p></li>
							<li><p class="gn-description"><?php echo esc_html__( 'Logos, trademarks, or badges from other platforms', 'gigneo' ); ?></p></li>
							<li><p class="gn-description"><?php echo esc_html__( 'Images that feature competitors brands or services', 'gigneo' ); ?></p></li>
						</ul>
						<h4 class="gn-title"><?php echo esc_html__( 'Best image practices:', 'gigneo' ); ?></h4>
						<ul class="gn-list">
							<li><p class="gn-description"><?php echo esc_html__( 'Recommended size: 1000 x 500 px', 'gigneo' ); ?></p></li>
							<li><p class="gn-description"><?php echo esc_html__( 'Minimum size: 600 x 300 px', 'gigneo' ); ?></p></li>
							<li><p class="gn-description">
							<?php
							printf(
								// translators: %s is max size
								esc_html__( 'Max file size: %s MB', 'gigneo' ),
								esc_html( $image_max_size )
							);
							?>
							</p></li>
						</ul>
						<p class="gn-description"><?php echo esc_html__( 'Adhering to these guidelines will ensure your submission is accepted.', 'gigneo' ); ?></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<?php
if ( ! in_array( 'intake_form', gigneo_active_modules(), true ) && 'job' !== $intake_form_for ) {
	gigneo_load_template( 'dashboard/service/parts/edit/publish', true, $args );
}
?>