<?php
/**
 * Documentation and About Info Tab
 *
 * Displays field types documentation and tutorial links.
 * Uses centralized tutorial links from epofw-tutorial-links.php.
 *
 * @package    Extra_Product_Options_For_WooCommerce
 * @subpackage Extra_Product_Options_For_WooCommerce/settings
 * @since      1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Get links from centralized config.
$epofw_field_types_links = epofw_get_field_types_links();
$epofw_general_docs      = epofw_get_general_docs_links();

// Convert field types to array format for backward compatibility.
$epofw_field_types = array();
foreach ( $epofw_field_types_links as $epofw_ftl_type => $epofw_data ) {
	$epofw_field_types[] = array_merge( array( 'type' => $epofw_ftl_type ), $epofw_data );
}

// Convert general docs to array format.
$epofw_general_docs_array = array();
foreach ( $epofw_general_docs as $epofw_gd_type => $epofw_data ) {
	$epofw_general_docs_array[] = array_merge( array( 'type' => $epofw_gd_type ), $epofw_data );
}
?>
<hr class="wp-header-end">

<!-- General Documentation Section -->
<div class="epofw-addons-section epofw-about-info-section">
	<div class="epofw-section-header">
		<h2 class="epofw-section-title"><?php esc_html_e( 'General', 'extra-product-options-for-woocommerce' ); ?></h2>
		<p class="epofw-section-subtitle"><?php esc_html_e( 'Essential guides for sections, rows, and conditional logic. Master the core features of the addon builder.', 'extra-product-options-for-woocommerce' ); ?></p>
	</div>

	<div class="epofw-addons-container epofw-addons-grid">
		<?php foreach ( $epofw_general_docs_array as $epofw_item ) : ?>
			<div class="epofw-addon-card epofw-field-type-card" data-doc-type="<?php echo esc_attr( $epofw_item['type'] ); ?>">
				<div class="epofw-card-header">
					<div class="epofw-card-icon">
						<i class="dashicons <?php echo esc_attr( $epofw_item['icon'] ); ?>"></i>
					</div>
					<div class="epofw-card-type">
						<span><?php echo esc_html( $epofw_item['title'] ); ?></span>
					</div>
				</div>
				<div class="epofw-card-body">
					<div class="epofw-card-description">
						<p><?php echo esc_html( $epofw_item['description'] ); ?></p>
					</div>
				</div>
				<div class="epofw-card-footer">
					<div class="epofw-field-type-links">
						<?php if ( ! empty( $epofw_item['doc_link'] ) ) : ?>
							<a href="<?php echo esc_url( $epofw_item['doc_link'] ); ?>" class="epofw-field-type-link" title="<?php esc_attr_e( 'Documentation', 'extra-product-options-for-woocommerce' ); ?>" target="_blank">
								<i class="dashicons dashicons-book-alt"></i>
								<span><?php esc_html_e( 'Docs', 'extra-product-options-for-woocommerce' ); ?></span>
							</a>
						<?php endif; ?>
						<?php if ( ! empty( $epofw_item['video_link'] ) ) : ?>
							<a href="<?php echo esc_url( $epofw_item['video_link'] ); ?>" class="epofw-field-type-link" title="<?php esc_attr_e( 'Video Tutorial', 'extra-product-options-for-woocommerce' ); ?>" target="_blank">
								<i class="dashicons dashicons-video-alt3"></i>
								<span><?php esc_html_e( 'Video', 'extra-product-options-for-woocommerce' ); ?></span>
							</a>
						<?php endif; ?>
					</div>
				</div>
			</div>
		<?php endforeach; ?>
	</div>
</div>

<!-- Field Types Section -->
<div class="epofw-addons-section epofw-about-info-section">
	<div class="epofw-section-header">
		<h2 class="epofw-section-title"><?php esc_html_e( 'Field Types', 'extra-product-options-for-woocommerce' ); ?></h2>
		<p class="epofw-section-subtitle"><?php esc_html_e( 'Explore all 21 field types with documentation and video tutorials. Learn how to use each field type effectively.', 'extra-product-options-for-woocommerce' ); ?></p>
	</div>

	<div class="epofw-addons-container epofw-addons-grid">
		<?php foreach ( $epofw_field_types as $epofw_field ) : ?>
			<?php
			$epofw_premium_activate = epofw_fs()->can_use_premium_code();
			?>
			<div class="epofw-addon-card epofw-field-type-card" data-field-type="<?php echo esc_attr( $epofw_field['type'] ); ?>">
				<div class="epofw-card-header">
					<div class="epofw-card-icon">
						<i class="dashicons <?php echo esc_attr( $epofw_field['icon'] ); ?>"></i>
					</div>
					<div class="epofw-card-type">
						<span><?php echo esc_html( $epofw_field['title'] ); ?></span>
						<?php if ( ! empty( $epofw_field['premium'] ) && ! $epofw_premium_activate ) : ?>
							<span class="epofw-premium-badge"><?php esc_html_e( 'Premium', 'extra-product-options-for-woocommerce' ); ?></span>
						<?php endif; ?>
					</div>
				</div>
				<div class="epofw-card-body">
					<div class="epofw-card-description">
						<p><?php echo esc_html( $epofw_field['description'] ); ?></p>
					</div>
				</div>
				<div class="epofw-card-footer">
					<div class="epofw-field-type-links">
						<?php if ( ! empty( $epofw_field['doc_link'] ) ) : ?>
							<a href="<?php echo esc_url( $epofw_field['doc_link'] ); ?>" class="epofw-field-type-link" title="<?php esc_attr_e( 'Documentation', 'extra-product-options-for-woocommerce' ); ?>" target="_blank">
								<i class="dashicons dashicons-book-alt"></i>
								<span><?php esc_html_e( 'Docs', 'extra-product-options-for-woocommerce' ); ?></span>
							</a>
						<?php endif; ?>
						<?php if ( ! empty( $epofw_field['video_link'] ) ) : ?>
							<a href="<?php echo esc_url( $epofw_field['video_link'] ); ?>" class="epofw-field-type-link" title="<?php esc_attr_e( 'Video Tutorial', 'extra-product-options-for-woocommerce' ); ?>" target="_blank">
								<i class="dashicons dashicons-video-alt3"></i>
								<span><?php esc_html_e( 'Video', 'extra-product-options-for-woocommerce' ); ?></span>
							</a>
						<?php endif; ?>
					</div>
				</div>
			</div>
		<?php endforeach; ?>
	</div>
</div>
