From ca0264eec3307c0309c06eb7d90da55cb3619147 Mon Sep 17 00:00:00 2001
From: Soare Robert Daniel <soare.robert.daniel@protonmail.com>
Date: Fri, 20 Sep 2024 09:41:27 +0300
Subject: [PATCH] refactor: product metabox for fields attach (#382)

---
 classes/admin.class.php |  42 +++++++++++++
 inc/admin.php           | 128 +++++++++++++++++++++++++++++-----------
 2 files changed, 137 insertions(+), 33 deletions(-)

diff --git a/classes/admin.class.php b/classes/admin.class.php
index 7083ddd9..9a4c8b25 100644
--- a/classes/admin.class.php
+++ b/classes/admin.class.php
@@ -398,6 +398,48 @@ function ppom_tabs_custom_style() {
 			td.ppom-files-display a.button {
 				text-align: center;
 			}
+
+			.ppom-settings-container {
+				display: flex;
+				flex-direction: column;
+				gap: 15px;
+				margin: 10px 15px;
+			}
+
+			.ppom-settings-container-item {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+			}
+
+			label.ppom-settings-container-item {
+				width: 100%;
+				max-width: 600px;
+				margin: unset;
+			}
+
+			.ppom-settings-container .ppom-upsell-link {
+				display: inline-flex;
+				align-items: center;
+				padding: 0.5rem 1rem;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: #2563eb;
+				background-color: #eff6ff;
+				border: 1px solid #bfdbfe;
+				border-radius: 0.375rem;
+				text-decoration: none;
+				transition: all 150ms ease-in-out;
+			}
+
+			.ppom-settings-container .ppom-upsell-link:hover {
+				background-color: #dbeafe;
+				color: #1d4ed8;
+			}
+
+			.ppom-settings-container .ppom-disabled-text {
+				color: #8d8d8d;
+			}
 		</style>
 		<?php
 	}
diff --git a/inc/admin.php b/inc/admin.php
index 2c653b93..dc522db1 100644
--- a/inc/admin.php
+++ b/inc/admin.php
@@ -80,51 +80,113 @@ function ppom_meta_list( $post ) {
 	$ppom         = new PPOM_Meta( $post->ID );
 	$all_meta     = PPOM()->get_product_meta_all();
 	$ppom_setting = admin_url( 'admin.php?page=ppom' );
+	
+	$html  = '<div class="options_group ppom-settings-container" style="max-height:375px; overflow:auto;">';
+	
+	// UP-SELL
+	$html .= '<a class="ppom-upsell-link" target="_blank" href="' . tsdk_utmify( tsdk_translate_link( PPOM_UPGRADE_URL ), 'product-edit', 'metabox' ) . '">';
+	$html .= '<span class="dashicons dashicons-external"></span> ';
+	$html .= __( 'Using multiple PPOM Fields on the same product is available in PRO.', 'woocommerce-product-addon' );
+	$html .= '</a>';
+
+	// PPOM Fields select table.
+	$html .= '<table id="ppom_meta_sortable" class="wp-list-table widefat fixed striped">';
+
+	$html .= '<div class="ppom-search-meta" style="text-align: right;">';
+	$html .= '<input type="text" class="ppom-search-meta-js" placeholder="' . __( 'Search Meta', 'woocommerce-product-addon' ) . '">';
+	$html .= '<a target="_blank" class="button button-primary" href="' . esc_url( $ppom_setting ) . '">' . __( 'Create New Meta', 'woocommerce-product-addon' ) . '</a>';
+	$html .= '</div>';
 
-	$html  = '<div class="options_group">';
-	$html .= '<p>' . __( 'Select Meta to Show Fields on this product', 'woocommerce-product-addon' );
-	// $html .= __(' Or <a target="_blank" class="button" href="'.esc_url($ppom_setting).'">Create New Meta</a>', 'woocommerce-product-addon');
-	$html .= '</p>';
-
-	$html .= '<p>';
-	$html .= '<select name="ppom_product_meta" id="ppom_product_meta" class="select">';
-	$html .= '<option selected="selected"> ' . __( 'None', 'woocommerce-product-addon' ) . '</option>';
-
+	$html .= '<thead><tr>';
+	$html .= '<th>' . __( 'Select Meta', 'woocommerce-product-addon' ) . '</th>';
+	$html .= '<th>' . __( 'Meta ID', 'woocommerce-product-addon' ) . '</th>';
+	$html .= '<th>' . __( 'Meta Name', 'woocommerce-product-addon' ) . '</th>';
+	$html .= '<th>' . __( 'Edit', 'woocommerce-product-addon' ) . '</th>';
+	$html .= '</tr></thead>';
+	
 	foreach ( $all_meta as $meta ) {
+		$html .= '<tr data-ppom-search="' . esc_attr( sanitize_key( $meta->productmeta_name ) ) . '" style="cursor: move;">';
+
+		// Select/Checkbox
+		$html .= '<td width="5%">';
+		$html .= '<input name="ppom_product_meta" type="radio" style="cursor:auto;-webkit-appearance:checkbox" value="' . esc_attr( $meta->productmeta_id ) . '" ';
+		if (
+			isset( $ppom->meta_id ) &&
+			(
+				(
+					is_array( $ppom->meta_id ) &&
+					in_array( $meta->productmeta_id, $ppom->meta_id )
+				) ||
+				(
+					is_numeric( $ppom->meta_id ) &&
+					$ppom->meta_id === $meta->productmeta_id
+				)
+			)
+		) {
+			$html .= ' checked ';
+		}
+		$html .= 'id="ppom-' . esc_attr( $meta->productmeta_id ) . '">';
+		$html .= '</td>';
 
-		$html .= '<option value="' . esc_attr( $meta->productmeta_id ) . '" ';
-		$html .= selected( $ppom->single_meta_id, $meta->productmeta_id, false );
-		$html .= 'id="select_meta_group-' . $meta->productmeta_id . '">';
-		$html .= stripslashes( $meta->productmeta_name );
-		$html .= '</option>';
-	}
-	$html .= '</select>';
+		// ID Column
+		$html .= '<td width="5%">' . $meta->productmeta_id . '</td>';
 
-	if ( $ppom->single_meta_id != 'None' ) {
+		// Meta Name Column
+		$html .= '<td width="50%">' . stripslashes( $meta->productmeta_name ) . '</td>';
 
-		$ppom_add_args = array(
-			'productmeta_id' => $ppom->single_meta_id,
-			'do_meta'        => 'edit',
-			'product_id'     => $post->ID,
+		// Edit Meta Shortcut Column
+		$url_edit = add_query_arg(
+			array(
+				'productmeta_id' => $meta->productmeta_id,
+				'do_meta'        => 'edit',
+			),
+			$ppom_setting
 		);
 
-		$url_edit = add_query_arg( $ppom_add_args, $ppom_setting );
-		$html    .= ' <a class="button" href="' . esc_url( $url_edit ) . '" title="Edit"><span class="dashicons dashicons-edit"></span></a>';
-	}
+		$html .= '<td width="5%">';
+		$html .= '<a target="_blank" style="font-weight:600; color:#0073aa" href="' . esc_url( $url_edit ) . '"><span class="dashicons dashicons-edit"></span></a>';
+		$html .= '</td>';
 
-	// $html .= '<hr>';
-	// $html .= ' <a class="button button-primary" href="'.esc_url($ppom_setting).'">Create New Meta</a>';
+		$html .= '</tr>';
+	}
 
-	$html .= '</p>';
+	$html .= '</table>';
 	$html .= '</div>';
 
-	$ppom_add_args    = array(
-		'action'     => 'new',
-		'product_id' => $post->ID,
-	);
-	$ppom_setting_url = add_query_arg( $ppom_add_args, $ppom_setting );
+	$html .= '<hr>';
+    $html  .= '<div class="ppom-settings-container">';
+    $html .= '<strong>' . __( 'PPOM PopUp Settings', 'woocommerce-product-addon' ) . ' (' . __( 'PRO', 'woocommerce-product-addon' ) . ')' . '</strong>';
+    $html .= '<label class="ppom-settings-container-item ppom-disabled-text"><input type="checkbox" disabled>' . __( 'Enable PopUp', 'woocommerce-product-addon' ) . '</label>';
+    $html .= '<label class="ppom-settings-container-item ppom-disabled-text">' . __( 'PopUp Button Label', 'woocommerce-product-addon' );
+    $html .= '<input type="text" disabled></label>';
+    $html .= '</div>';
+
+    $html .= '<hr>';
+    $html .= '<div class="ppom-settings-container">';
+    $html .= '<strong>' . __( 'PPOM Enquiry Form Settings', 'woocommerce-product-addon' ) . ' (' . __( 'PRO', 'woocommerce-product-addon' ) . ')' . '</strong>';
+    $html .= '<label class="ppom-settings-container-item ppom-disabled-text"><input disabled type="checkbox">' . __( 'Enable Enquiry Form', 'woocommerce-product-addon' ) . '</label>';
+    $html .= '</div>';
+
+	?>
+	<script type="text/javascript">
+		jQuery(function ($) {
+			jQuery(document).on('keyup', '.ppom-search-meta-js', function (e) {
+				e.preventDefault();
+
+				var div = $(this).parent().parent();
+				var search_val = $(this).val().toLowerCase();
+				if (search_val != '') {
+					div.find('#ppom_meta_sortable tbody tr').hide();
+					div.find('#ppom_meta_sortable tbody tr[data-ppom-search*="' + search_val + '"]').show();
+				} else {
+					div.find('#ppom_meta_sortable tbody tr:hidden').show();
+				}
+			});
 
-	$html .= sprintf( __( ' - <a href="%s" target="_blank">Create New Meta</a></p>', 'woocommerce-product-addon' ), esc_url( $ppom_setting_url ) );
+			$("#ppom_meta_sortable tbody").sortable();
+		});
+	</script>
+	<?php
 
 	echo apply_filters( 'ppom_select_meta_in_product', $html, $ppom, $all_meta );