old-new-wiaas/backend/app/plugins/wiaas/includes/admin/package/views/html-linked-packages.php

<?php
/**
 * Wiaas Linked Packages Editor
 */

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

<div id="wiaas_linked_packages" class="panel woocommerce_options_panel">

	<div class="options_group">
		<p class="form-field">
			<label style="font-weight: bold;" for="wiaas_addon_packages"><?php esc_html_e( 'Add-ons:', 'wiaas' ); ?></label>
			<select
				class="wc-product-search"
				multiple="multiple"
				style="width: 50%;"
				id="wiaas_addon_packages"
				name="wiaas_addon_packages[]"
				data-sortable="true"
				data-placeholder="<?php esc_attr_e( 'Search for addons ...', 'wiaas' ); ?>"
				data-action="wiaas_json_search_addons"
				data-exclude="<?php echo intval( $package->get_id() ); ?>">
				<?php
				foreach ( $addons as $addon ) {
					echo '<option value="' . esc_attr( $addon->get_id() ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $addon->get_formatted_name() ) . '</option>';
				}
				?>
			</select>
			<?php echo wc_help_tip( __( 'This lets you choose which packages will be available as addons.', 'wiaas' ) );?>
		</p>
	</div>

	<div class="options_group">
		<script type="text/javascript">
            jQuery(document).ready(function ($) {
                $("#wiaas_add_option_group").click(function (event) {
                    event.preventDefault();

                    var data = {
                        post:<?php echo isset( $_GET['post'] ) ? $_GET['post'] : 0; ?>,
                        action: 'wiaas_create_empty_option_group'
                    };

                    $.post(ajaxurl, data, function (response) {
                        $('#wiaas_package_option_groups_list').append(response);
                    });
                });

                $('#wiaas_package_option_groups').delegate('.delete_wiaas_option_group', 'click', function (event) {
                    event.preventDefault();
                    if (confirm("<?php _e( 'Are you sure you would like to remove this option group?', 'wiaas' ); ?>")) {
                        var id = $(this).data('id');
                        $('#wiaas_option_group_' + id).slideUp().remove();
                    }
                });

                $('#wiaas_package_option_groups').delegate('.wiaas_option_group_name', 'change', function (event) {
                    event.preventDefault();

                    var name = $(this).val();
                    var id = $(this).data('id');

                    $(`#wiaas_option_group_${id}_title`).text(name);

                });

                $('#wiaas_package_option_groups').delegate('.wiaas_option_group_options', 'change', function (event) {
                    event.preventDefault();

                    var id = $(this).data('id');
                    var selected_options_ids = $(this).val() ? $(this).val().toString().split(',') : [];
                    var previous_options_ids = $(this).data('selected') ? $(this).data('selected').toString().split(',') : [];

                    var added_option_id = selected_options_ids.find(id => previous_options_ids.indexOf(id) === -1);
                    var removed_option_id = previous_options_ids.find(id => selected_options_ids.indexOf(id) === -1);

                    if (added_option_id) {
                        $(this).children().filter(function() {
                            var option_id = $(this).val();
                            return option_id === added_option_id;
                        }).clone().appendTo(`#wiaas_option_group_${id}_default`);
                    }

                    if (removed_option_id) {
                        $(`#wiaas_option_group_${id}_default`).children().
                        filter(function() {
                            var option_id = $(this).val();
                           return option_id === removed_option_id;
                        }).
                        remove();
                    }

                    $(this).data('selected', selected_options_ids.join(','));

                });
            });
		</script>

		<div id="wiaas_package_option_groups" class="wc-metaboxes-wrapper">
			<div class="toolbar toolbar-top">
				<button type="button" class="button button-primary" id="wiaas_add_option_group">
					<?php esc_html_e( 'Add new option group', 'wiaas' ); ?>
				</button>
				<span class="expand-close">
                    <a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'wiaas' ); ?></a>
                    /
                    <a href="#" class="close_all"><?php esc_html_e( 'Close', 'wiaas' ); ?></a>
                </span>
			</div>
			<div id="wiaas_package_option_groups_list" class="wc-metaboxes">
				<?php
				foreach ($option_groups as $group) {
					$group_options = isset($group['options']) ? $group['options'] : array();
					$id = $group['id'];

					include 'html-package-options-group.php';
				}
				?>
			</div>
			<div class="toolbar">
		        <span class="expand-close">
		            <a href="#" class="expand_all">
		                <?php esc_html_e( 'Expand', 'wiaas' ); ?>
		            </a>
		            /
		            <a href="#" class="close_all"><?php esc_html_e( 'Close', 'wiaas' ); ?></a>
		        </span>
			</div>
		</div>

	</div>

</div>