<?php
/**
 * Niwa Bloging Settings Admin Page
 *
 * Submenu page under Niwa AI for configuring blog-related settings:
 * image API keys, blog defaults, money posts, and feature toggles.
 *
 * @package Niwa_AI
 * @since   0.12.0
 */

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

class Niwa_AI_Admin_Bloging_Settings {

	use Niwa_AI_Admin_Field_Helpers;

	const OPTION_KEY = 'niwa_bloging_settings';

	/**
	 * Constructor — register all hooks.
	 */
	public function __construct() {
		add_action( 'admin_menu', array( $this, 'add_submenu' ), 25 );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_assets' ) );
	}

	// ─────────────────────────────────────────────
	// Menu & Settings API
	// ─────────────────────────────────────────────

	/**
	 * Add the Bloging submenu under Niwa AI.
	 */
	public function add_submenu() {
		add_submenu_page(
			'niwa-ai',
			__( 'Niwa Bloging Settings', 'niwa-ai' ),
			__( 'Bloging', 'niwa-ai' ),
			'manage_options',
			'niwa-ai-bloging',
			array( $this, 'render_page' )
		);
	}

	/**
	 * Register settings with the WordPress Settings API.
	 */
	public function register_settings() {
		register_setting(
			'niwa_bloging_settings',
			self::OPTION_KEY,
			array( $this, 'sanitize' )
		);
	}

	/**
	 * Enqueue wp-color-picker and inline JS on this page only.
	 *
	 * @param string $hook_suffix Current admin page hook.
	 */
	public function enqueue_admin_assets( $hook_suffix ) {
		if ( 'niwa-ai_page_niwa-ai-bloging' !== $hook_suffix ) {
			return;
		}

		wp_enqueue_style( 'wp-color-picker' );
		wp_enqueue_script( 'wp-color-picker' );
	}

	// ─────────────────────────────────────────────
	// Defaults & Getter
	// ─────────────────────────────────────────────

	/**
	 * Get all settings merged with defaults.
	 *
	 * @return array
	 */
	public static function get_settings() {
		$defaults = self::get_defaults();
		$stored   = get_option( self::OPTION_KEY, array() );
		$stored   = is_array( $stored ) ? $stored : array();

		return array_merge( $defaults, $stored );
	}

	/**
	 * Default values for all bloging settings.
	 *
	 * @return array
	 */
	private static function get_defaults() {
		// Detect language from WordPress site locale.
		$locale   = get_locale();
		$lang_map = array(
			'sr_RS' => 'sr-RS',
			'en_US' => 'en-US',
			'de_DE' => 'de-DE',
			'fr_FR' => 'fr-FR',
			'it_IT' => 'it-IT',
			'es_ES' => 'es-ES',
		);

		$detected_lang = isset( $lang_map[ $locale ] ) ? $lang_map[ $locale ] : str_replace( '_', '-', $locale );

		return array(
			// Image API Keys.
			'pexels_key'            => '',
			'unsplash_key'          => '',
			'lummi_key'             => '',
			'default_image_source'  => 'auto',

			// Blog Defaults.
			'default_author'        => 0,
			'accent_color'          => '#3b82f6',
			'default_language'      => $detected_lang,
			'default_category'      => 'Blog',

			// Money Posts.
			'money_posts'           => '[]',

			// Feature Toggles.
			'auto_toc'              => 1,
			'progress_bar'          => 1,
			'json_ld'               => 1,
			'allow_new_taxonomy_terms' => 0,
		);
	}

	// ─────────────────────────────────────────────
	// Sanitization
	// ─────────────────────────────────────────────

	/**
	 * Sanitize all bloging settings.
	 *
	 * @param mixed $input Raw input from the form.
	 * @return array Sanitized options.
	 */
	public function sanitize( $input ) {
		$existing = get_option( self::OPTION_KEY, array() );
		$out      = is_array( $existing ) ? $existing : array();

		if ( ! is_array( $input ) ) {
			return $out;
		}

		// ── Image API Keys ──
		$out['pexels_key']   = isset( $input['pexels_key'] ) ? sanitize_text_field( $input['pexels_key'] ) : '';
		$out['unsplash_key'] = isset( $input['unsplash_key'] ) ? sanitize_text_field( $input['unsplash_key'] ) : '';
		$out['lummi_key']    = isset( $input['lummi_key'] ) ? sanitize_text_field( $input['lummi_key'] ) : '';

		$valid_sources = array( 'auto', 'pexels', 'unsplash', 'lummi' );
		$source        = isset( $input['default_image_source'] ) ? sanitize_text_field( $input['default_image_source'] ) : 'auto';
		$out['default_image_source'] = in_array( $source, $valid_sources, true ) ? $source : 'auto';

		// ── Blog Defaults ──
		$out['default_author'] = isset( $input['default_author'] ) ? max( 0, intval( $input['default_author'] ) ) : 0;

		$color = isset( $input['accent_color'] ) ? sanitize_hex_color( $input['accent_color'] ) : '';
		$out['accent_color'] = $color ? $color : '#3b82f6';

		$lang        = isset( $input['default_language'] ) ? sanitize_text_field( $input['default_language'] ) : 'en-US';
		$out['default_language'] = preg_match( '/^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/', $lang ) ? $lang : 'en-US';

		$out['default_category'] = isset( $input['default_category'] ) ? sanitize_text_field( $input['default_category'] ) : 'Blog';

		// ── Money Posts (JSON array) ──
		$out['money_posts'] = $this->sanitize_money_posts( $input );

		// ── Feature Toggles (checkboxes — unchecked means absent) ──
		$out['auto_toc']      = ! empty( $input['auto_toc'] ) ? 1 : 0;
		$out['progress_bar']  = ! empty( $input['progress_bar'] ) ? 1 : 0;
		$out['json_ld']       = ! empty( $input['json_ld'] ) ? 1 : 0;
		$out['allow_new_taxonomy_terms'] = ! empty( $input['allow_new_taxonomy_terms'] ) ? 1 : 0;

		return $out;
	}

	/**
	 * Sanitize the money_posts repeater data into a clean JSON string.
	 *
	 * @param array $input Raw form input.
	 * @return string JSON-encoded array.
	 */
	private function sanitize_money_posts( $input ) {
		$posts = array();

		if ( ! empty( $input['money_posts_path'] ) && is_array( $input['money_posts_path'] ) ) {
			$paths        = $input['money_posts_path'];
			$titles       = isset( $input['money_posts_title'] ) ? (array) $input['money_posts_title'] : array();
			$descriptions = isset( $input['money_posts_description'] ) ? (array) $input['money_posts_description'] : array();

			foreach ( $paths as $i => $path ) {
				$path  = sanitize_text_field( $path );
				$title = isset( $titles[ $i ] ) ? sanitize_text_field( $titles[ $i ] ) : '';
				$desc  = isset( $descriptions[ $i ] ) ? sanitize_text_field( $descriptions[ $i ] ) : '';

				// Skip empty rows.
				if ( '' === $path && '' === $title && '' === $desc ) {
					continue;
				}

				$posts[] = array(
					'path'        => $path,
					'title'       => $title,
					'description' => $desc,
				);
			}
		}

		return wp_json_encode( $posts );
	}

	// ─────────────────────────────────────────────
	// Page Rendering
	// ─────────────────────────────────────────────

	/**
	 * Render the full settings page.
	 */
	public function render_page() {
		if ( ! current_user_can( 'manage_options' ) ) {
			wp_die( esc_html__( 'Forbidden', 'niwa-ai' ) );
		}

		$opts = self::get_settings();
		$n    = self::OPTION_KEY;

		echo '<div class="wrap niwa-wrap">';

		// ── Page Header ──
		echo '<div class="niwa-page-header">';
		echo '<div class="niwa-page-header__icon">';
		echo '<span class="dashicons dashicons-edit-large" style="font-size:28px;width:28px;height:28px;"></span>';
		echo '</div>';
		echo '<div class="niwa-page-header__text">';
		echo '<h1 class="niwa-page-header__title">' . esc_html__( 'Niwa Bloging Settings', 'niwa-ai' ) . '</h1>';
		echo '<p class="niwa-page-header__subtitle">' . esc_html__( 'Configure image sources, blog defaults, money posts, and publishing features.', 'niwa-ai' ) . '</p>';
		echo '</div>';
		echo '</div>';

		echo '<form method="post" action="options.php">';
		settings_fields( 'niwa_bloging_settings' );

		$this->render_section_image_keys( $opts, $n );
		$this->render_section_blog_defaults( $opts, $n );
		$this->render_section_money_posts( $opts, $n );
		$this->render_section_features( $opts, $n );

		// ── Submit ──
		echo '<div style="margin-top:16px;">';
		submit_button( __( 'Save Bloging Settings', 'niwa-ai' ), 'primary niwa-btn niwa-btn--primary', 'submit', false );
		echo '</div>';

		echo '</form>';
		echo '</div>'; // .wrap .niwa-wrap

		$this->render_inline_styles();
		$this->render_inline_scripts();
	}

	// ─────────────────────────────────────────────
	// Section: Image API Keys
	// ─────────────────────────────────────────────

	/**
	 * Render the Image API Keys card.
	 *
	 * @param array  $opts Current options.
	 * @param string $n    Option key namespace.
	 */
	private function render_section_image_keys( $opts, $n ) {
		echo '<div class="niwa-card">';
		echo '<div class="niwa-card__header">';
		echo '<div class="niwa-card__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div>';
		echo '<h2 class="niwa-card__title">' . esc_html__( 'Image API Keys', 'niwa-ai' ) . '</h2>';
		echo '</div>';
		echo '<div class="niwa-card__body">';

		// Pexels API Key.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-pexels-key">' . esc_html__( 'Pexels API Key', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-pexels-key" type="password" name="' . esc_attr( $n . '[pexels_key]' ) . '" value="' . esc_attr( $opts['pexels_key'] ) . '" class="niwa-input--wide" autocomplete="off" />';
		echo '<span class="niwa-field__hint">' . esc_html__( 'Free: 200 requests/hour, 20,000/month. Get key at pexels.com/api', 'niwa-ai' ) . '</span>';
		echo '</div>';

		// Unsplash Access Key.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-unsplash-key">' . esc_html__( 'Unsplash Access Key', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-unsplash-key" type="password" name="' . esc_attr( $n . '[unsplash_key]' ) . '" value="' . esc_attr( $opts['unsplash_key'] ) . '" class="niwa-input--wide" autocomplete="off" />';
		echo '<span class="niwa-field__hint">' . esc_html__( 'Free: 50 requests/hour demo mode. Get key at unsplash.com/developers', 'niwa-ai' ) . '</span>';
		echo '</div>';

		// Lummi API Key.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-lummi-key">' . esc_html__( 'Lummi API Key', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-lummi-key" type="password" name="' . esc_attr( $n . '[lummi_key]' ) . '" value="' . esc_attr( $opts['lummi_key'] ) . '" class="niwa-input--wide" autocomplete="off" />';
		echo '<span class="niwa-field__hint">' . esc_html__( 'Free, requires email approval. Get key at lummi.ai', 'niwa-ai' ) . '</span>';
		echo '</div>';

		// Default Image Source.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-image-source">' . esc_html__( 'Default Image Source', 'niwa-ai' ) . '</label>';
		echo '<select id="niwa-bloging-image-source" name="' . esc_attr( $n . '[default_image_source]' ) . '">';
		$sources = array(
			'auto'     => __( 'Auto (smart routing based on content keywords)', 'niwa-ai' ),
			'pexels'   => __( 'Pexels', 'niwa-ai' ),
			'unsplash' => __( 'Unsplash', 'niwa-ai' ),
			'lummi'    => __( 'Lummi', 'niwa-ai' ),
		);
		foreach ( $sources as $val => $lbl ) {
			echo '<option value="' . esc_attr( $val ) . '"' . selected( $opts['default_image_source'], $val, false ) . '>' . esc_html( $lbl ) . '</option>';
		}
		echo '</select>';
		echo '</div>';

		echo '</div>'; // .niwa-card__body
		echo '</div>'; // .niwa-card
	}

	// ─────────────────────────────────────────────
	// Section: Blog Defaults
	// ─────────────────────────────────────────────

	/**
	 * Render the Blog Defaults card.
	 *
	 * @param array  $opts Current options.
	 * @param string $n    Option key namespace.
	 */
	private function render_section_blog_defaults( $opts, $n ) {
		echo '<div class="niwa-card">';
		echo '<div class="niwa-card__header">';
		echo '<div class="niwa-card__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>';
		echo '<h2 class="niwa-card__title">' . esc_html__( 'Blog Defaults', 'niwa-ai' ) . '</h2>';
		echo '</div>';
		echo '<div class="niwa-card__body">';

		// Default Author ID.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-author">' . esc_html__( 'Default WordPress Author ID', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-author" type="number" min="0" name="' . esc_attr( $n . '[default_author]' ) . '" value="' . esc_attr( $opts['default_author'] ) . '" class="niwa-input--wide" />';
		echo '<span class="niwa-field__hint">' . esc_html__( 'Leave at 0 to use the current WordPress user. Invalid users are never written to schema.', 'niwa-ai' ) . '</span>';
		echo '</div>';

		// Accent Color.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-accent">' . esc_html__( 'Accent Color', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-accent" type="text" name="' . esc_attr( $n . '[accent_color]' ) . '" value="' . esc_attr( $opts['accent_color'] ) . '" class="niwa-bloging-color-picker" data-default-color="#3b82f6" />';
		echo '</div>';

		// Default Language.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-language">' . esc_html__( 'Default Language', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-language" type="text" name="' . esc_attr( $n . '[default_language]' ) . '" value="' . esc_attr( $opts['default_language'] ) . '" class="niwa-input--wide" placeholder="sr-RS" />';
		echo '<span class="niwa-field__hint">' . esc_html__( 'Any valid BCP 47 language tag; auto-detected from the WordPress site language on first use.', 'niwa-ai' ) . '</span>';
		echo '</div>';

		// Default Blog Category.
		echo '<div class="niwa-field">';
		echo '<label class="niwa-field__label" for="niwa-bloging-category">' . esc_html__( 'Default Blog Category', 'niwa-ai' ) . '</label>';
		echo '<input id="niwa-bloging-category" type="text" name="' . esc_attr( $n . '[default_category]' ) . '" value="' . esc_attr( $opts['default_category'] ) . '" class="niwa-input--wide" />';
		echo '</div>';

		echo '</div>'; // .niwa-card__body
		echo '</div>'; // .niwa-card
	}

	// ─────────────────────────────────────────────
	// Section: Money Posts
	// ─────────────────────────────────────────────

	/**
	 * Render the Money Posts card with repeatable fields.
	 *
	 * @param array  $opts Current options.
	 * @param string $n    Option key namespace.
	 */
	private function render_section_money_posts( $opts, $n ) {
		$money_posts_raw = isset( $opts['money_posts'] ) ? $opts['money_posts'] : '[]';
		$money_posts     = json_decode( $money_posts_raw, true );

		if ( ! is_array( $money_posts ) ) {
			$money_posts = array();
		}

		echo '<div class="niwa-card">';
		echo '<div class="niwa-card__header">';
		echo '<div class="niwa-card__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>';
		echo '<h2 class="niwa-card__title">' . esc_html__( 'Money Posts', 'niwa-ai' ) . '</h2>';
		echo '</div>';
		echo '<div class="niwa-card__body">';

		echo '<span class="niwa-field__hint" style="display:block;margin-bottom:16px;">' . esc_html__( 'Internal links injected into blog posts as CTAs. Each entry needs a path, title, and description.', 'niwa-ai' ) . '</span>';

		echo '<div id="niwa-bloging-money-posts-container">';

		if ( ! empty( $money_posts ) ) {
			foreach ( $money_posts as $i => $post ) {
				$this->render_money_post_row( $n, $i, $post );
			}
		}

		echo '</div>'; // #niwa-bloging-money-posts-container

		echo '<button type="button" class="button niwa-btn niwa-btn--secondary" id="niwa-bloging-add-money-post">' . esc_html__( '+ Add Money Post', 'niwa-ai' ) . '</button>';

		echo '</div>'; // .niwa-card__body
		echo '</div>'; // .niwa-card
	}

	/**
	 * Render a single money post repeater row.
	 *
	 * @param string $n    Option key namespace.
	 * @param int    $i    Row index.
	 * @param array  $post Row data (path, title, description).
	 */
	private function render_money_post_row( $n, $i, $post ) {
		$path  = isset( $post['path'] ) ? $post['path'] : '';
		$title = isset( $post['title'] ) ? $post['title'] : '';
		$desc  = isset( $post['description'] ) ? $post['description'] : '';

		echo '<div class="niwa-bloging-money-row">';
		echo '<div class="niwa-bloging-money-row__fields">';

		echo '<div class="niwa-bloging-money-row__field">';
		echo '<label class="niwa-field__label">' . esc_html__( 'Path', 'niwa-ai' ) . '</label>';
		echo '<input type="text" name="' . esc_attr( $n . '[money_posts_path][]' ) . '" value="' . esc_attr( $path ) . '" placeholder="/kontakt" class="niwa-input--wide" />';
		echo '</div>';

		echo '<div class="niwa-bloging-money-row__field">';
		echo '<label class="niwa-field__label">' . esc_html__( 'Title', 'niwa-ai' ) . '</label>';
		echo '<input type="text" name="' . esc_attr( $n . '[money_posts_title][]' ) . '" value="' . esc_attr( $title ) . '" placeholder="' . esc_attr__( 'Kontaktirajte nas', 'niwa-ai' ) . '" class="niwa-input--wide" />';
		echo '</div>';

		echo '<div class="niwa-bloging-money-row__field">';
		echo '<label class="niwa-field__label">' . esc_html__( 'Description', 'niwa-ai' ) . '</label>';
		echo '<input type="text" name="' . esc_attr( $n . '[money_posts_description][]' ) . '" value="' . esc_attr( $desc ) . '" placeholder="' . esc_attr__( 'Posavetujte se sa nasim timom', 'niwa-ai' ) . '" class="niwa-input--wide" />';
		echo '</div>';

		echo '</div>'; // .niwa-bloging-money-row__fields

		echo '<button type="button" class="button niwa-btn niwa-btn--danger niwa-bloging-remove-money-post">' . esc_html__( 'Remove', 'niwa-ai' ) . '</button>';
		echo '</div>'; // .niwa-bloging-money-row
	}

	// ─────────────────────────────────────────────
	// Section: Features Toggle
	// ─────────────────────────────────────────────

	/**
	 * Render the Features Toggle card.
	 *
	 * @param array  $opts Current options.
	 * @param string $n    Option key namespace.
	 */
	private function render_section_features( $opts, $n ) {
		echo '<div class="niwa-card">';
		echo '<div class="niwa-card__header">';
		echo '<div class="niwa-card__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>';
		echo '<h2 class="niwa-card__title">' . esc_html__( 'Features Toggle', 'niwa-ai' ) . '</h2>';
		echo '</div>';
		echo '<div class="niwa-card__body">';

		$toggles = array(
			'auto_toc'      => array(
				'label' => __( 'Auto-generate TOC', 'niwa-ai' ),
				'hint'  => __( 'Automatically insert a table of contents at the top of blog posts.', 'niwa-ai' ),
			),
			'progress_bar'  => array(
				'label' => __( 'Add reading progress bar', 'niwa-ai' ),
				'hint'  => __( 'Show a horizontal reading progress indicator at the top of the page.', 'niwa-ai' ),
			),
			'json_ld'       => array(
				'label' => __( 'Emit Niwa JSON-LD when Niwa owns schema', 'niwa-ai' ),
				'hint'  => __( 'Add BlogPosting/Breadcrumb data only when an active SEO integration does not already own the graph.', 'niwa-ai' ),
			),
			'allow_new_taxonomy_terms' => array(
				'label' => __( 'Allow explicitly requested new taxonomy terms', 'niwa-ai' ),
				'hint'  => __( 'Off by default. The canonical quality gate is always mandatory; this setting only permits missing categories/tags to be created during execution, never during preview.', 'niwa-ai' ),
			),
		);

		foreach ( $toggles as $key => $meta ) {
			echo '<div class="niwa-field">';
			echo '<label class="niwa-toggle">';
			echo '<input type="checkbox" name="' . esc_attr( $n . '[' . $key . ']' ) . '" value="1" ' . checked( ! empty( $opts[ $key ] ), true, false ) . ' />';
			echo esc_html( $meta['label'] );
			echo '</label>';
			echo '<span class="niwa-field__hint">' . esc_html( $meta['hint'] ) . '</span>';
			echo '</div>';
		}

		echo '</div>'; // .niwa-card__body
		echo '</div>'; // .niwa-card
	}

	// ─────────────────────────────────────────────
	// Inline Styles & Scripts
	// ─────────────────────────────────────────────

	/**
	 * Render inline CSS for the money posts repeater.
	 */
	private function render_inline_styles() {
		?>
		<style>
		.niwa-bloging-money-row {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 16px;
			margin-bottom: 12px;
			background: var(--niwa-surface-2, #f9fafb);
			border: 1px solid var(--niwa-edge, #e5e7eb);
			border-radius: 8px;
		}
		.niwa-bloging-money-row__fields {
			flex: 1;
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
		}
		.niwa-bloging-money-row__field {
			flex: 1;
			min-width: 160px;
		}
		.niwa-bloging-money-row__field .niwa-field__label {
			display: block;
			font-size: 12px;
			font-weight: 600;
			margin-bottom: 4px;
			color: var(--niwa-ink-3, #6b7280);
		}
		.niwa-bloging-money-row .niwa-btn--danger {
			margin-top: 22px;
			flex-shrink: 0;
		}
		</style>
		<?php
	}

	/**
	 * Render inline JavaScript for the color picker and money posts repeater.
	 */
	private function render_inline_scripts() {
		$n = self::OPTION_KEY;
		?>
		<script>
		jQuery(function($) {

			// ── Color Picker ──
			$('.niwa-bloging-color-picker').wpColorPicker();

			// ── Money Posts Repeater ──
			var $container = $('#niwa-bloging-money-posts-container');
			var optionKey = <?php echo wp_json_encode( $n ); ?>;

			$('#niwa-bloging-add-money-post').on('click', function(e) {
				e.preventDefault();

				var row = '<div class="niwa-bloging-money-row">'
					+ '<div class="niwa-bloging-money-row__fields">'
					+ '<div class="niwa-bloging-money-row__field">'
					+ '<label class="niwa-field__label"><?php echo esc_js( __( 'Path', 'niwa-ai' ) ); ?></label>'
					+ '<input type="text" name="' + optionKey + '[money_posts_path][]" value="" placeholder="/kontakt" class="niwa-input--wide" />'
					+ '</div>'
					+ '<div class="niwa-bloging-money-row__field">'
					+ '<label class="niwa-field__label"><?php echo esc_js( __( 'Title', 'niwa-ai' ) ); ?></label>'
					+ '<input type="text" name="' + optionKey + '[money_posts_title][]" value="" placeholder="<?php echo esc_js( esc_attr__( 'Kontaktirajte nas', 'niwa-ai' ) ); ?>" class="niwa-input--wide" />'
					+ '</div>'
					+ '<div class="niwa-bloging-money-row__field">'
					+ '<label class="niwa-field__label"><?php echo esc_js( __( 'Description', 'niwa-ai' ) ); ?></label>'
					+ '<input type="text" name="' + optionKey + '[money_posts_description][]" value="" placeholder="<?php echo esc_js( esc_attr__( 'Posavetujte se sa nasim timom', 'niwa-ai' ) ); ?>" class="niwa-input--wide" />'
					+ '</div>'
					+ '</div>'
					+ '<button type="button" class="button niwa-btn niwa-btn--danger niwa-bloging-remove-money-post"><?php echo esc_js( __( 'Remove', 'niwa-ai' ) ); ?></button>'
					+ '</div>';

				$container.append(row);
			});

			$container.on('click', '.niwa-bloging-remove-money-post', function(e) {
				e.preventDefault();
				$(this).closest('.niwa-bloging-money-row').fadeOut(200, function() {
					$(this).remove();
				});
			});
		});
		</script>
		<?php
	}
}
