<?php
/**
 * Sports Leagues :: Assets.
 *
 * @since   0.14.0
 * @package Sports_Leagues
 *
 */

/**
 * Sports Leagues :: Assets class.
 */
class Sports_Leagues_Assets {

	protected ?Sports_Leagues $plugin = null;

	/**
	 * Constructor.
	 *
	 * @param Sports_Leagues $plugin Main plugin object.
	 */
	public function __construct( Sports_Leagues $plugin ) {
		$this->plugin = $plugin;

		// Run Hooks
		$this->hooks();
	}

	/**
	 * Initiate our hooks.
	 */
	public function hooks() {

		/**
		 * Enqueue admin scripts
		 */
		add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ], 8 );

		/**
		 * Enqueue public scripts & styles
		 */
		add_action( 'wp_enqueue_scripts', [ $this, 'public_enqueue_scripts' ] );

		/**
		 * Add svg icons to the footer
		 */
		add_action( 'admin_footer', [ $this, 'include_admin_svg_icons' ], 99 );

		/**
		 * Add svg icons to the public side
		 */
		add_action( 'wp_footer', [ $this, 'include_public_svg_icons' ], 99 );
	}

	/**
	 * Add SVG definitions to the admin footer.
	 */
	public function include_admin_svg_icons() {

		// Define SVG sprite file.
		$svg_icons = Sports_Leagues::dir( 'admin/img/svg-icons.svg' );

		// If it exists, include it.
		if ( file_exists( $svg_icons ) ) {
			require_once $svg_icons;
		}
	}

	/**
	 * Add SVG definitions to the public footer.
	 */
	public function include_public_svg_icons() {

		// Define SVG sprite file.
		$svg_icons = Sports_Leagues::dir( 'public/img/svg-icons.svg' );

		// If it exists, include it.
		if ( file_exists( $svg_icons ) ) {
			require_once $svg_icons;
		}
	}

	/**
	 * Load admin scripts and styles
	 */
	public function admin_enqueue_scripts() {

		// Load global styles
		if ( is_rtl() ) {
			wp_enqueue_style( 'sl_styles_global_rtl', Sports_Leagues::url( 'admin/css/global-rtl.css' ), [], Sports_Leagues::VERSION );
			wp_enqueue_style( 'sl_styles_global_rtl_extra', Sports_Leagues::url( 'admin/css/global-rtl-extra.css' ), [], Sports_Leagues::VERSION );
		} else {
			wp_enqueue_style( 'sl_styles_global', Sports_Leagues::url( 'admin/css/global.css' ), [], Sports_Leagues::VERSION );
		}

		/*
		|--------------------------------------------------------------------------
		| Modaal
		|
		| @license  MIT
		| @link     https://github.com/humaan/Modaal
		|--------------------------------------------------------------------------
		*/
		wp_enqueue_script( 'modaal', Sports_Leagues::url( 'vendor/modaal/modaal.min.js' ), [ 'jquery', 'underscore' ], Sports_Leagues::VERSION, false );

		/*
		|--------------------------------------------------------------------------
		| Global JS
		|--------------------------------------------------------------------------
		*/
		wp_enqueue_script( 'anwp-sl-js-global', Sports_Leagues::url( 'admin/js/anwp-sl-global.min.js' ), [], Sports_Leagues::VERSION, false );

		wp_localize_script(
			'anwp-sl-js-global',
			'anwpslGlobals',
			[
				'ajaxNonce'     => wp_create_nonce( 'ajax_anwpsl_nonce' ),
				'selectorHtml'  => $this->include_selector_modaal(),
				'rest_root'     => esc_url_raw( rest_url() ),
				'rest_nonce'    => wp_create_nonce( 'wp_rest' ),
				'countries'     => [],
				'teams'         => [],
				'seasons'       => [],
				'leagues'       => [],
				'optionsLoaded' => false,
				'context_l10n'  => [
					'team'       => esc_html__( 'Team', 'sports-leagues' ),
					'game'       => esc_html__( 'Game', 'sports-leagues' ),
					'player'     => esc_html__( 'Player', 'sports-leagues' ),
					'tournament' => esc_html__( 'Tournament', 'sports-leagues' ),
					'stage'      => esc_html__( 'Stage', 'sports-leagues' ),
				],
			]
		);

		/*
		|--------------------------------------------------------------------------
		| Select2 - 4.0.13
		|
		| @license  MIT
		| @link     https://select2.github.io
		|--------------------------------------------------------------------------
		*/
		wp_enqueue_script( 'anwp-select2', Sports_Leagues::url( 'vendor/select2/select2.full.min.js' ), [ 'jquery' ], '4.0.13', false );
		wp_enqueue_style( 'anwp-select2', Sports_Leagues::url( 'vendor/select2/select2.min.css' ), [], '4.0.13' );

		// Load styles and scripts (limit to plugin pages)
		$current_screen = get_current_screen();

		$page_prefix              = sanitize_title( _x( 'Sports Leagues', 'admin menu title', 'sports-leagues' ) );
		$page_settings_prefix     = sanitize_title( _x( 'Settings & Tools', 'admin menu title', 'sports-leagues' ) );
		$page_translations_prefix = sanitize_title( esc_html__( 'Translations', 'sports-leagues' ) );

		$plugin_pages = [
			'sl_player',
			'sl_team',
			'sl_venue',
			'sl_tournament',
			'sl_standing',
			'sl_game',
			'sl_official',
			'sl_staff',
			'toplevel_page_sports-leagues',

			// Support
			'sports-leagues_page_support',
			$page_prefix . '_page_support',

			// Settings
			'toplevel_page_sports_leagues_settings',
			'tournaments_page_sl-standing-settings',

			'sports-settings_page_sports_leagues_config',
			$page_settings_prefix . '_page_sports_leagues_config',

			// toolbox
			'sports-leagues_page_sl-toolbox',
			$page_prefix . '_page_sl-toolbox',

			// Text Options (under Translations menu)
			'translations_page_sports_leagues_text',
			$page_translations_prefix . '_page_sports_leagues_text',

			// Game Events
			'sports-settings_page_sports_leagues_event',
			$page_settings_prefix . '_page_sports_leagues_event',

			'sports-leagues_page_sl-plugin-customize',
			$page_prefix . '_page_sl-plugin-customize',

			'sports-leagues_page_sl-import-tool',
			$page_prefix . '_page_sl-import-tool',

			// Player Stats
			'sports-settings_page_sl-player-stats',
			$page_settings_prefix . '_page_sl-player-stats',

			// Shortcodes page
			'sports-leagues_page_sl-shortcodes',
			$page_prefix . '_page_sl-shortcodes',

			// Configurator page
			'sports-settings_page_sl-configurator',
			$page_settings_prefix . '_page_sl-configurator',

			// Game Admin List
			'edit-sl_game',

			// Tournament Admin List
			'edit-sl_tournament',
		];

		/**
		 * Filters plugin pages.
		 *
		 * @param array $plugin_pages List of plugin pages to load styles.
		 *
		 * @since 0.1.0
		 */
		$plugin_pages = apply_filters( 'sports-leagues/admin/plugin_pages', $plugin_pages );

		if ( in_array( $current_screen->id, [ 'sports-settings_page_sports_leagues_event', $page_settings_prefix . '_page_sports_leagues_event' ], true ) ) {
			wp_enqueue_media();
		}

		// Load Common files
		if ( in_array( $current_screen->id, $plugin_pages, true ) ) {

			/*
			|--------------------------------------------------------------------------
			| CSS Styles
			|--------------------------------------------------------------------------
			*/
			if ( is_rtl() ) {
				wp_enqueue_style( 'sl_styles_rtl', Sports_Leagues::url( 'admin/css/styles-rtl.min.css' ), [], Sports_Leagues::VERSION );
			} else {
				wp_enqueue_style( 'sl_styles', Sports_Leagues::url( 'admin/css/styles.min.css' ), [], Sports_Leagues::VERSION );
			}

			/*
			|--------------------------------------------------------------------------
			| Migration CSS (deprecated Bootstrap grid from anwp-css)
			|
			| Provides .anwp-row, .anwp-col-*, .anwp-container classes for admin pages
			| that still use Bootstrap-style grid layout.
			|
			| @since 0.14.1
			| @deprecated Will be removed when all admin pages migrate to CSS Grid.
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_style( 'sl_migration', Sports_Leagues::url( 'admin/css/styles-migration.min.css' ), [], Sports_Leagues::VERSION );

			wp_enqueue_style( 'microtip', Sports_Leagues::url( 'admin/css/microtip.min.css' ), [], Sports_Leagues::VERSION );

			/*
			|--------------------------------------------------------------------------
			| World Flags Sprite
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_style( 'sl_flags', Sports_Leagues::url( 'vendor/world-flags-sprite/stylesheets/flags32.css' ), [], Sports_Leagues::VERSION );
			wp_enqueue_style( 'sl_flags_16', Sports_Leagues::url( 'vendor/world-flags-sprite/stylesheets/flags16.css' ), [], Sports_Leagues::VERSION );

			/*
			|--------------------------------------------------------------------------
			| FlatPickr Styles
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_style( 'sl_flatpickr', Sports_Leagues::url( 'admin/css/flatpickr.min.css' ), [], '4.6.3' );
			wp_enqueue_style( 'sl_flatpickr_theme', Sports_Leagues::url( 'admin/css/flatpickr_airbnb.css' ), [], '4.6.3' );

			/*
			|--------------------------------------------------------------------------
			| Toastr
			|
			| @license  MIT
			| @link     https://github.com/CodeSeven/toastr
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_script( 'toastr', Sports_Leagues::url( 'vendor/toastr/toastr.min.js' ), [], '2.1.4', false ); // ToDo deprecated - will be removed soon (replaced with notyf)

			/*
			|--------------------------------------------------------------------------
			| notyf
			|
			| @license  MIT
			| @link     https://github.com/caroso1222/notyf
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_script( 'notyf', Sports_Leagues::url( 'vendor/notyf/notyf.min.js' ), [], '3.10.0', false );

			/*
			|--------------------------------------------------------------------------
			| Tippy.js
			| * (c) atomiks
			| * MIT
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_script( 'tippy', Sports_Leagues::url( 'vendor/tippy/tippy-bundle.umd.min.js' ), [ 'popperjs' ], '6.2.3', true );
			wp_enqueue_style( 'tippy-light-border', Sports_Leagues::url( 'vendor/tippy/light-border.css' ), [], '6.1.1' );

			/*
			|--------------------------------------------------------------------------
			| Popper.js (UMD)
			| * (c) Federico Zivolo
			| * MIT
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_script( 'popperjs', Sports_Leagues::url( 'vendor/popperjs/popper.min.js' ), [], '2.2.3', true );

			/*
			|--------------------------------------------------------------------------
			| Main admin JS
			|--------------------------------------------------------------------------
			*/
			wp_enqueue_script( 'sl_admin', Sports_Leagues::url( 'admin/js/sl-admin.min.js' ), [ 'jquery', 'underscore', 'jquery-ui-sortable' ], Sports_Leagues::VERSION, true );

			wp_localize_script(
				'sl_admin',
				'anwp',
				[
					'rest_root'   => esc_url_raw( rest_url() ),
					'rest_nonce'  => wp_create_nonce( 'wp_rest' ),
					'admin_url'   => admin_url(),
					'spinner_url' => admin_url( '/images/spinner.gif' ),
				]
			);

			wp_localize_script( 'sl_admin', 'sl_admin_l10n', $this->plugin->data->get_l10n_admin() );

			/*
			|--------------------------------------------------------------------------
			| Load Apps
			|--------------------------------------------------------------------------
			*/
			$this->app_scripts_loader( $current_screen->id );
		}

		// Load Google Maps only for Venue page
		if ( 'sl_venue' === $current_screen->id ) {

			if ( Sports_Leagues_Options::get_value( 'google_maps_api' ) ) {
				$google_maps_api_key = '?key=' . Sports_Leagues_Options::get_value( 'google_maps_api' );

				wp_enqueue_script( 'google-maps-api-3', '//maps.googleapis.com/maps/api/js' . $google_maps_api_key . '&libraries=places', [], 3, false );
			}
		}

		if ( 'edit-sl_game' === $current_screen->id ) {
			wp_enqueue_script( 'jquery-ui-datepicker' );
		}
	}

	public function app_scripts_loader( $current_screen_id ) {

		wp_register_script( 'vuejs-sl-3', Sports_Leagues::url( 'vendor/vuejs/vue.runtime.global.prod.min.js' ), [], '3.3.4', false );

		$loader_data     = [];
		$page_prefix     = sanitize_title( _x( 'Sports Leagues', 'admin menu title', 'sports-leagues' ) );
		$settings_prefix = sanitize_title( _x( 'Settings & Tools', 'admin menu title', 'sports-leagues' ) );

		if ( in_array( $current_screen_id, [ 'sports-settings_page_sl-configurator', $settings_prefix . '_page_sl-configurator' ], true ) ) {
			/*
			|--------------------------------------------------------------------------
			| Configurator
			|--------------------------------------------------------------------------
			*/
			$loader_data['src']  = Sports_Leagues::url( 'admin/js/app/configurator.min.js' );
			$loader_data['deps'] = [ 'vuejs-sl-3' ];

		} elseif ( 'sl_team' === $current_screen_id ) {
			/*
			|--------------------------------------------------------------------------
			| Team Edit
			|--------------------------------------------------------------------------
			*/
			$loader_data['src'] = Sports_Leagues::url( 'admin/js/app/roster.min.js' );
		} elseif ( 'tournaments_page_sl-standing-settings' === $current_screen_id ) {
			/*
			|--------------------------------------------------------------------------
			| Standing Settings
			|--------------------------------------------------------------------------
			*/
			$loader_data['src'] = Sports_Leagues::url( 'admin/js/app/standing-settings.min.js' );
		} elseif ( 'sl_tournament' === $current_screen_id ) {
			/*
			|--------------------------------------------------------------------------
			| Game Edit
			|--------------------------------------------------------------------------
			*/
			$loader_data['src'] = Sports_Leagues::url( 'admin/js/app/tournament.min.js' );
		} elseif ( 'sl_standing' === $current_screen_id ) {
			/*
			|--------------------------------------------------------------------------
			| Standing
			|--------------------------------------------------------------------------
			*/
			if ( 'yes' !== get_post_meta( get_the_ID(), '_sl_fixed', true ) ) {
				$loader_data['src'] = Sports_Leagues::url( 'admin/js/app/standing-setup.min.js' );
			} else {
				$loader_data['src']  = Sports_Leagues::url( 'admin/js/app/standing.min.js' );
				$loader_data['deps'] = [ 'vuejs-sl-3', 'sl_admin', 'wp-color-picker' ];
				wp_enqueue_style( 'wp-color-picker' );
			}
		}

		/**
		 * Modify App loader scripts and data
		 *
		 * @since 0.11.1
		 *
		 * @param array $loader_data
		 * @param string $current_screen_id
		 */
		$loader_data = apply_filters( 'sports-leagues/admin/app_js_loader', $loader_data, $current_screen_id );

		/*
		|--------------------------------------------------------------------------
		| Try to load script
		|--------------------------------------------------------------------------
		*/
		if ( is_array( $loader_data ) && ! empty( $loader_data['src'] ) ) {
			$script_data = wp_parse_args(
				$loader_data,
				[
					'src'       => '',
					'deps'      => [ 'vuejs-sl-3', 'sl_admin' ],
					'in_footer' => true,
				]
			);

			wp_enqueue_script( 'sl-admin-vue', $script_data['src'], $script_data['deps'], Sports_Leagues::VERSION, $script_data['in_footer'] );
		}

		/*
		|--------------------------------------------------------------------------
		| Admin App
		|--------------------------------------------------------------------------
		*/
		$admin_app_pages = [
			$page_prefix . '_page_sl-import-tool',
			'sports-leagues_page_sl-import-tool',
			$page_prefix . '_page_sl-toolbox',
			'sports-leagues_page_sl-toolbox',
			'toplevel_page_sports-leagues',
			'sports-settings_page_sports_leagues_event',
			$settings_prefix . '_page_sports_leagues_event',
			'sl_game',
			'sports-settings_page_sl-player-stats',
			$settings_prefix . '_page_sl-player-stats',
		];

		if ( in_array( $current_screen_id, $admin_app_pages, true ) ) {
			wp_enqueue_script( 'sl-admin-core-app', Sports_Leagues::url( 'admin/js/admin-core.min.js' ), [], Sports_Leagues::VERSION, true );
		}
	}

	/**
	 * Load selector modal
	 *
	 * @return string
	 * @since 0.9.0
	 */
	public function include_selector_modaal(): string {
		ob_start();
		?>
		<div sl-x-data sl-x-cloak sl-x-show="$store.selectorSLModal.isOpen" sl-x-trap.inert.noscroll="$store.selectorSLModal.isOpen" class="anwp-d-flex--noimp sl-x-modal">
			<div sl-x-show="$store.selectorSLModal.isOpen" class="anwp-d-flex--noimp sl-x-modal__wrapper">
				<div class="sl-x-modal__header">
					<h3 style="margin: 0">SL Selector: <span sl-x-text="$store.selectorSLModal.contextHeader"></span></h3>
				</div>

				<div sl-x-on:click="$store.selectorSLModal.closeModal()" class="sl-x-modal__close-button">
					<span>X</span>
				</div>

				<div class="sl-x-modal__section sl-x-modal__search-bar">
					<div class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<label for="sl-x-modal__field__search"><?php echo esc_html__( 'start typing name or title ...', 'sports-leagues' ); ?></label>
						<input sl-x-on:input.debounce="$store.selectorSLModal.sendSearchRequest()" sl-x-model="$store.selectorSLModal.s" name="s" type="text" id="sl-x-modal__field__search" value="" class="sl-shortcode-attr code">
					</div>
					<div sl-x-show="['player'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__club"><?php echo esc_html__( 'Team', 'sports-leagues' ); ?></label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('teams')"
								sl-x-show="$store.selectorSLModal.filterValues['teams']">X</span>
						</div>
						<select name="teams" id="sl-x-modal__field__club" class="sl-x-modal__select">
							<option value="">- select -</option>
						</select>
					</div>
					<div sl-x-show="['game'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__club-home"><?php echo esc_html__( 'Team A', 'sports-leagues' ); ?></label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('team_a')"
								sl-x-show="$store.selectorSLModal.filterValues['team_a']">X</span>
						</div>
						<select name="team_a" id="sl-x-modal__field__club-home" class="sl-x-modal__select">
							<option value="">- select -</option>
						</select>
					</div>
					<div sl-x-show="['game'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__club-away"><?php echo esc_html__( 'Team B', 'sports-leagues' ); ?></label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('team_b')"
								sl-x-show="$store.selectorSLModal.filterValues['team_b']">X</span>
						</div>
						<select name="team_b" id="sl-x-modal__field__club-away" class="sl-x-modal__select">
							<option value="">- select -</option>
						</select>
					</div>
					<div sl-x-show="['game','tournament'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__season">
								<?php echo esc_html__( 'Season', 'sports-leagues' ); ?>
							</label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('seasons')"
								sl-x-show="$store.selectorSLModal.filterValues['seasons']">X</span>
						</div>

						<select name="seasons" id="sl-x-modal__field__season" class="sl-x-modal__select"></select>
					</div>
					<div sl-x-show="['tournament'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__league"><?php echo esc_html__( 'League', 'sports-leagues' ); ?></label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('leagues')"
								sl-x-show="$store.selectorSLModal.filterValues['leagues']">X</span>
						</div>
						<select name="leagues" id="sl-x-modal__field__league" class="sl-x-modal__select"></select>
					</div>
					<div sl-x-show="['player','team'].includes( $store.selectorSLModal.context ) && ! $store.selectorSLModal.isLoadingGlobals" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="sl-x-modal__field__country"><?php echo esc_html__( 'Country/Nationality', 'sports-leagues' ); ?></label>
							<span class="anwp-d-flex--noimp sl-x-modal__clear-filter"
								sl-x-on:click="$store.selectorSLModal.clearFilter('countries')"
								sl-x-show="$store.selectorSLModal.filterValues['countries']">X</span>
						</div>
						<select name="countries" id="sl-x-modal__field__country" class="sl-x-modal__select"></select>
					</div>
					<div sl-x-show="['game'].includes( $store.selectorSLModal.context )" class="sl-x-modal__bar-group anwp-mr-2 anwp-mt-2">
						<div class="anwp-d-flex--noimp">
							<label for="anwp-x-modal__field__date"><?php echo esc_html__( 'Date', 'sports-leagues' ); ?></label>
						</div>
						<input sl-x-on:change="$store.selectorSLModal.sendSearchRequest()" sl-x-model="$store.selectorSLModal.date" name="date" type="date" id="anwp-x-modal__field__date" value="" class="sl-shortcode-attr code">
					</div>
					<div sl-x-show="$store.selectorSLModal.isLoadingGlobals" class="anwp-mt-2 anwp-d-flex--noimp anwp-align-items-center">
						<span class="spinner is-active" style="float: none; margin-top: 0;"></span>
					</div>
				</div>

				<div class="sl-x-modal__section sl-x-modal__section--secondary">
					<h4 style="margin: 0"><?php echo esc_html__( 'Selected Values', 'sports-leagues' ); ?>
						<span sl-x-show="$store.selectorSLModal.single"> (max - 1)</span>:
						<span sl-x-bind:class="$store.selectorSLModal.isLoadingInitial? 'is-active' : ''" class="spinner" style="float: none; margin-top: 0;"></span>
					</h4>
					<div sl-x-show="$store.selectorSLModal.selectedItems.length" sl-x-transition class="sl-x-modal__selected-wrapper">
						<template sl-x-for="selectedItem in $store.selectorSLModal.selectedItems">
							<div class="sl-x-modal__selected-item">
								<img sl-x-show="selectedItem.img" sl-x-bind:src="selectedItem.img" class="anwp-mr-2" alt="logo" style="width: 25px; height: 25px; object-fit: contain;" />
								<span sl-x-text="selectedItem.title"></span>
								<button sl-x-on:click="$store.selectorSLModal.removeSelected( selectedItem.id )"
									type="button" class="button button-small">
									X
								</button>
							</div>
						</template>
					</div>
					<div sl-x-show="!$store.selectorSLModal.selectedItems.length">
						- <?php echo esc_html__( 'none', 'sports-leagues' ); ?> -
					</div>
				</div>

				<div class="sl-x-modal__section sl-x-modal__section-main">
					<table sl-x-show="$store.selectorSLModal.rows.length && !$store.selectorSLModal.isLoadingContent" class="wp-list-table widefat striped table-view-list">
						<thead>
						<tr sl-x-show="$store.selectorSLModal.columns.length">
							<td class="manage-column check-column"></td>
							<template sl-x-for="column in $store.selectorSLModal.columns">
								<td class="manage-column" sl-x-text="column.title"></td>
							</template>
						</tr>
						</thead>

						<tbody>
						<template sl-x-for="row in $store.selectorSLModal.rows">
							<tr>
								<td>
									<button
										sl-x-on:click="$store.selectorSLModal.addToSelected( row.id, row.title, row.img || '' )"
										sl-x-bind:disabled="$store.selectorSLModal.selectedItemIds.includes( row.id )"
										type="button" class="button button-small sl-x-modal__section-action">
										+
									</button>
								</td>
								<template sl-x-for="column in $store.selectorSLModal.columns">
									<td sl-x-bind:class="'img' === column.slug ? 'anwp-w-10' : ''">
										<template sl-x-if="'img' === column.slug && row.img">
											<img sl-x-bind:src="row.img" class="anwp-admin-table-league-logo" alt="logo" style="width: 30px; height: 30px; object-fit: contain;" />
										</template>
										<template sl-x-if="'flag' === column.slug && row.flag">
											<svg class="fl-flag--rounded " width="25" height="25">
												<use sl-x-bind:href="row.flag"></use>
											</svg>
										</template>
										<template sl-x-if="'img' !== column.slug && 'flag' !== column.slug">
											<span sl-x-text="row[column.slug]"></span>
										</template>
									</td>
								</template>
							</tr>
						</template>
						</tbody>

						<tfoot>
						<tr>
							<td class="manage-column check-column"></td>
							<template sl-x-for="column in $store.selectorSLModal.columns">
								<td class="manage-column" sl-x-text="column.title"></td>
							</template>
						</tr>
						</tfoot>
					</table>
					<div sl-x-show="!$store.selectorSLModal.rows.length && !$store.selectorSLModal.isLoadingContent"
						class="anwp-alert-warning">- <?php echo esc_html__( 'nothing found', 'sports-leagues' ); ?> -
					</div>
				</div>
				<span sl-x-show="$store.selectorSLModal.isLoadingContent"
					sl-x-bind:class="$store.selectorSLModal.isLoadingContent? 'is-active' : ''"
					class="spinner sl-x-modal__spinner"></span>


				<div class="sl-x-modal__footer">
					<button sl-x-on:click="$store.selectorSLModal.closeModal()" class="button">
						<?php echo esc_html__( 'Cancel', 'sports-leagues' ); ?>
					</button>
					<button sl-x-on:click="$store.selectorSLModal.insertSelected()" class="button button-primary anwp-ml-2">
						<?php echo esc_html__( 'Insert', 'sports-leagues' ); ?>
					</button>
				</div>
			</div>
		</div>
		<?php
		return ob_get_clean();
	}


	/**
	 * Load admin scripts and styles
	 *
	 * @since 0.1.0
	 */
	public function public_enqueue_scripts() {

		/*
		|--------------------------------------------------------------------------
		| Basic Styles
		|--------------------------------------------------------------------------
		*/
		$dynamic_css = $this->plugin->customizer->get_customizer_css();

		if ( is_rtl() ) {
			wp_enqueue_style( 'sl_styles_rtl', Sports_Leagues::url( 'public/css/styles-rtl.min.css' ), [], Sports_Leagues::VERSION );

			if ( $dynamic_css ) {
				wp_add_inline_style( 'sl_styles_rtl', wp_strip_all_tags( $dynamic_css ) );
			}
		} else {
			wp_enqueue_style( 'sl_styles', Sports_Leagues::url( 'public/css/styles.min.css' ), [], Sports_Leagues::VERSION );

			if ( $dynamic_css ) {
				wp_add_inline_style( 'sl_styles', wp_strip_all_tags( $dynamic_css ) );
			}
		}

		/*
		|--------------------------------------------------------------------------
		| Legacy CSS (optional, for backward compatibility)
		|--------------------------------------------------------------------------
		*/
		$this->maybe_load_legacy_css();

		/*
		|--------------------------------------------------------------------------
		| World Flags Sprite
		|--------------------------------------------------------------------------
		*/
		if ( 'legacy' === sports_leagues()->customizer->get_value( 'general', 'flags' ) ) {
			wp_enqueue_style( 'sl_flags', Sports_Leagues::url( 'vendor/world-flags-sprite/stylesheets/flags32.css' ), [], Sports_Leagues::VERSION );
			wp_enqueue_style( 'sl_flags_16', Sports_Leagues::url( 'vendor/world-flags-sprite/stylesheets/flags16.css' ), [], Sports_Leagues::VERSION );
		}

		/*
		|--------------------------------------------------------------------------
		| Plyr
		| @licence - MIT
		| @url - https://plyr.io/
		|--------------------------------------------------------------------------
		*/
		if ( apply_filters( 'sports-leagues/config/load_plyr', true ) && 'youtube' !== Sports_Leagues_Options::get_value( 'preferred_video_player' ) ) {
			wp_register_script( 'plyr', Sports_Leagues::url( 'vendor/plyr/plyr.polyfilled.min.js' ), [], '3.8.3', false );
			wp_register_style( 'plyr', Sports_Leagues::url( 'vendor/plyr/plyr.css' ), [], '3.8.3' );
		}

		/*
		|--------------------------------------------------------------------------
		| Justified Gallery
		|--------------------------------------------------------------------------
		*/
		wp_register_script( 'anwp-sl-justified-gallery', Sports_Leagues::url( 'vendor/flickr-justified-gallery/fjGallery.min.js' ), [], Sports_Leagues::VERSION, true );
		wp_register_script( 'anwp-sl-justified-gallery-modal', Sports_Leagues::url( 'vendor/baguette-box/baguetteBox.min.js' ), [], Sports_Leagues::VERSION, true );

		/*
		|--------------------------------------------------------------------------
		| Data Tables
		| @license: MIT - https://datatables.net/
		|--------------------------------------------------------------------------
		*/
		wp_register_style( 'anwp-data-tables', Sports_Leagues::url( 'vendor/datatables/datatables.min.css' ), [], Sports_Leagues::VERSION );
		wp_register_script( 'anwp-data-tables', Sports_Leagues::url( 'vendor/datatables/datatables.min.js' ), [ 'jquery' ], Sports_Leagues::VERSION, false );
		wp_register_script( 'sl-data-tables', Sports_Leagues::url( 'public/js/sl-datatables.min.js' ), [ 'anwp-data-tables' ], Sports_Leagues::VERSION, false );

		/*
		|--------------------------------------------------------------------------
		| Main JS
		|--------------------------------------------------------------------------
		*/
		wp_enqueue_script( 'anwp-sl-public', Sports_Leagues::url( 'public/js/sl-public.min.js' ), [], Sports_Leagues::VERSION, true );

		// sl_l10n
		wp_add_inline_script(
			'anwp-sl-public',
			'window.AnWPSL = ' . wp_json_encode(
				[
					'ajax_url'     => admin_url( 'admin-ajax.php' ),
					'spinner_url'  => admin_url( '/images/spinner.gif' ),
					'loader'       => includes_url( 'js/tinymce/skins/lightgray/img/loader.gif' ),
					'public_nonce' => wp_create_nonce( 'sl-public-nonce' ),
					'rest_root'    => esc_url_raw( rest_url() ),
					'native_yt'    => in_array( Sports_Leagues_Options::get_value( 'preferred_video_player' ), [ 'youtube', 'mixed' ], true ) ? 'yes' : '',
				]
			),
			'before'
		);

		/*
		|--------------------------------------------------------------------------
		| Additional Inline CSS
		|--------------------------------------------------------------------------
		*/
		$inline_css = [
			'[sl-x-cloak] { display: none !important; }', // AlpineJS support
			'.sl-not-ready {opacity: 0; transition: opacity 0.5s ease; visibility: hidden;}', // Hide some content before DOM loaded
			'.sl-ready .sl-not-ready  {opacity: 1; visibility: visible;}',
			'body:not(.sl-ready) .sl-not-ready-0 {display: none !important;}',
		];

		wp_add_inline_style( 'sl_styles', implode( ' ', $inline_css ) );
	}

	/**
	 * Conditionally load legacy CSS files for backward compatibility.
	 *
	 * @since 0.14.1
	 */
	protected function maybe_load_legacy_css() {

		/*
		|--------------------------------------------------------------------------
		| Legacy Bootstrap CSS (for backwards compatibility)
		|--------------------------------------------------------------------------
		*/
		$load_legacy_bootstrap = 'no' !== Sports_Leagues_Customizer::get_value( 'advanced_css', 'load_legacy_bootstrap', '' );

		/**
		 * Filter whether to load legacy Bootstrap CSS.
		 *
		 * @since 0.14.1
		 *
		 * @param bool $load_legacy_bootstrap Whether to load legacy Bootstrap CSS.
		 */
		$load_legacy_bootstrap = apply_filters( 'sports-leagues/assets/load_legacy_bootstrap', $load_legacy_bootstrap );

		if ( $load_legacy_bootstrap ) {
			if ( is_rtl() ) {
				wp_enqueue_style( 'sl_legacy_bootstrap_rtl', Sports_Leagues::url( 'public/css/styles-legacy-bootstrap-rtl.min.css' ), [ 'sl_styles' ], Sports_Leagues::VERSION );
			} else {
				wp_enqueue_style( 'sl_legacy_bootstrap', Sports_Leagues::url( 'public/css/styles-legacy-bootstrap.min.css' ), [ 'sl_styles' ], Sports_Leagues::VERSION );
			}

			/**
			 * Fires after legacy Bootstrap CSS is enqueued.
			 *
			 * @since 0.14.1
			 */
			do_action( 'sports-leagues/legacy_bootstrap_enqueued' );
		}

		/*
		|--------------------------------------------------------------------------
		| Legacy Grid CSS (for backwards compatibility)
		|--------------------------------------------------------------------------
		*/
		$load_legacy_grid = 'no' !== Sports_Leagues_Customizer::get_value( 'advanced_css', 'load_legacy_grid', '' );

		/**
		 * Filter whether to load legacy Grid CSS.
		 *
		 * @since 0.14.1
		 *
		 * @param bool $load_legacy_grid Whether to load legacy Grid CSS.
		 */
		$load_legacy_grid = apply_filters( 'sports-leagues/assets/load_legacy_grid', $load_legacy_grid );

		if ( $load_legacy_grid ) {
			if ( is_rtl() ) {
				wp_enqueue_style( 'sl_legacy_grid_rtl', Sports_Leagues::url( 'public/css/styles-legacy-grid-rtl.min.css' ), [ 'sl_styles' ], Sports_Leagues::VERSION );
			} else {
				wp_enqueue_style( 'sl_legacy_grid', Sports_Leagues::url( 'public/css/styles-legacy-grid.min.css' ), [ 'sl_styles' ], Sports_Leagues::VERSION );
			}

			/**
			 * Fires after legacy Grid CSS is enqueued.
			 *
			 * @since 0.14.1
			 */
			do_action( 'sports-leagues/legacy_grid_enqueued' );
		}
	}
}
