<?php
/**
 * MenuX — Mega Menu Admin Panel
 *
 * Renders the mega menu configuration panel. Each first-level item can have
 * the Mega Menu toggle enabled, which replaces the standard dropdown with a
 * full-width column layout. Column data is managed via a JS editor modal and
 * serialised to a JSON hidden input on save.
 *
 * @package GiuliomaxMenuBuilder
 */

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

/**
 * Renders the mega menu overview panel.
 *
 * @param array $menu_items  Saved menu items array from menux_menu_items option.
 */
function menux_render_megamenu_panel( $menu_items ) {
	$s                  = get_option( 'menux_style', array() );
	$mega_max_w         = isset( $s['mega_max_width'] )     ? (int) $s['mega_max_width']     : 0;
	$mega_mob           = ( $s['mega_mobile_disable'] ?? '0' ) === '1';
	$mega_open_duration = isset( $s['mega_open_duration'] ) ? (int) $s['mega_open_duration'] : 200;
	$mega_border_radius = isset( $s['mega_border_radius'] ) ? (int) $s['mega_border_radius'] : 14;

	// Global default colors (empty = use built-in fallback).
	$mega_link_color       = $s['mega_link_color']       ?? '';
	$mega_heading_color    = $s['mega_heading_color']    ?? '';
	$mega_accent_color     = $s['mega_accent_color']     ?? '';
	$mega_link_hover_color = $s['mega_link_hover_color'] ?? '';
	$mega_desc_color       = $s['mega_desc_color']       ?? '';
	$mega_divider_color    = $s['mega_divider_color']    ?? '';

	$gradient_presets = array(
		array( 'label' => esc_html__( 'White', 'giuliomax-menu-builder' ),        'value' => '#ffffff' ),
		array( 'label' => esc_html__( 'Light Gray', 'giuliomax-menu-builder' ),   'value' => '#f8fafc' ),
		array( 'label' => esc_html__( 'Purple', 'giuliomax-menu-builder' ),       'value' => 'linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%)' ),
		array( 'label' => esc_html__( 'Indigo', 'giuliomax-menu-builder' ),       'value' => 'linear-gradient(135deg,#4338ca 0%,#1d4ed8 100%)' ),
		array( 'label' => esc_html__( 'Sky', 'giuliomax-menu-builder' ),          'value' => 'linear-gradient(135deg,#0284c7 0%,#38bdf8 100%)' ),
		array( 'label' => esc_html__( 'Teal', 'giuliomax-menu-builder' ),         'value' => 'linear-gradient(135deg,#0d9488 0%,#22d3ee 100%)' ),
		array( 'label' => esc_html__( 'Emerald', 'giuliomax-menu-builder' ),      'value' => 'linear-gradient(135deg,#059669 0%,#86efac 100%)' ),
		array( 'label' => esc_html__( 'Sunset', 'giuliomax-menu-builder' ),       'value' => 'linear-gradient(135deg,#f97316 0%,#ef4444 100%)' ),
		array( 'label' => esc_html__( 'Rose', 'giuliomax-menu-builder' ),         'value' => 'linear-gradient(135deg,#f43f5e 0%,#ec4899 100%)' ),
		array( 'label' => esc_html__( 'Gold', 'giuliomax-menu-builder' ),         'value' => 'linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%)' ),
		array( 'label' => esc_html__( 'Dark', 'giuliomax-menu-builder' ),         'value' => 'linear-gradient(135deg,#0f172a 0%,#1e293b 100%)' ),
		array( 'label' => esc_html__( 'Charcoal', 'giuliomax-menu-builder' ),     'value' => 'linear-gradient(135deg,#334155 0%,#475569 100%)' ),
	);
	?>
	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon bm-card-icon-indigo">⚡</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php esc_html_e( 'Mega Menu', 'giuliomax-menu-builder' ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Full-width column layout with links, headings, images, shortcodes and auto-updating dynamic lists. Max 4 columns.', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

		<!-- ── Global Settings ── -->
		<div style="background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:14px 20px;margin-bottom:16px;display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;">
			<div>
				<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Max Width (px)', 'giuliomax-menu-builder' ); ?></label>
				<input type="number" id="bm-mega-setting-max-w" name="menux_style[mega_max_width]" value="<?php echo esc_attr( $mega_max_w ?: '' ); ?>" placeholder="<?php esc_attr_e( 'Full width', 'giuliomax-menu-builder' ); ?>" min="400" max="2400" class="bm-input" style="width:130px;">
			</div>
			<div>
				<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Border Radius (px)', 'giuliomax-menu-builder' ); ?></label>
				<input type="number" name="menux_style[mega_border_radius]" value="<?php echo esc_attr( $mega_border_radius ); ?>" min="0" max="40" class="bm-input" style="width:100px;" placeholder="14">
			</div>
			<div>
				<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Open Animation (ms)', 'giuliomax-menu-builder' ); ?></label>
				<input type="number" name="menux_style[mega_open_duration]" value="<?php echo esc_attr( $mega_open_duration ); ?>" min="0" max="800" step="50" class="bm-input" style="width:110px;" placeholder="200">
			</div>
			<div>
				<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Mobile Layout', 'giuliomax-menu-builder' ); ?></label>
				<?php
				// Back-compat: treat grid2 (removed 3.8.0) and unrecognised values as list/hide.
				$mega_mob_layout = $s['mega_mobile_layout'] ?? '';
				if ( ! in_array( $mega_mob_layout, array( 'list', 'hide' ), true ) ) {
					$mega_mob_layout = $mega_mob ? 'hide' : 'list';
				}
				?>
				<select name="menux_style[mega_mobile_layout]" class="bm-select" style="width:170px;">
					<option value="list"  <?php selected( $mega_mob_layout, 'list' );  ?>>👁 <?php esc_html_e( 'Visible on mobile', 'giuliomax-menu-builder' ); ?></option>
					<option value="hide"  <?php selected( $mega_mob_layout, 'hide' );  ?>>🚫 <?php esc_html_e( 'Hidden on mobile', 'giuliomax-menu-builder' ); ?></option>
				</select>
			</div>
		</div>

		<!-- ── Global Default Colors removed: per-item 🎨 Appearance tab covers this ── -->


			<?php
			// Count valid top-level items.
			$valid_items = array_filter( (array) $menu_items, function( $it ) {
				return ! empty( $it['type'] ) && ! empty( $it['item_key'] );
			} );
			?>
			<?php if ( empty( $valid_items ) ) : ?>
				<p style="color:#6b7280;font-size:13px;"><?php esc_html_e( 'Add menu items in the Menu Structure panel first, then save.', 'giuliomax-menu-builder' ); ?></p>
			<?php else : ?>

			<p style="font-size:13px;color:#6b7280;margin:0 0 20px;"><?php
				printf(
					/* translators: 1: opening <strong> tag, 2: closing </strong> tag, 3: opening <strong> tag, 4: closing </strong> tag */
					esc_html__( 'Toggle any item %1$sON%2$s to attach a rich mega-menu dropdown. Click %3$sSave Menu%4$s after making changes.', 'giuliomax-menu-builder' ),
					'<strong>', '</strong>', '<strong>', '</strong>'
				);
			?></p>

			<div class="bm-mega-item-list">
				<?php foreach ( (array) $menu_items as $item ) :
					if ( empty( $item['type'] ) || empty( $item['item_key'] ) ) continue;

					$item_key  = $item['item_key'];
					$is_page   = $item['type'] === 'page';
					// Prefer stored language labels; fall back to page title or URL.
					$label = '';
					foreach ( array( 'it', 'lang_it_IT', 'lang_en_US', 'en' ) as $_lk ) {
						if ( ! empty( $item[ $_lk ] ) ) { $label = $item[ $_lk ]; break; }
					}
					if ( '' === $label ) {
						$label = $is_page ? get_the_title( $item['id'] ?? 0 ) : ( $item['url'] ?? '—' );
					}
					$mega_on   = ( $item['mega_menu'] ?? '0' ) === '1';
					$full_w    = ( $item['mega_full_width'] ?? '1' ) === '1';
					$cols_json = ! empty( $item['mega_columns'] ) ? wp_json_encode( $item['mega_columns'] ) : '[]';
					?>
					<div class="bm-mega-item" id="bm-mega-item-<?php echo esc_attr( $item_key ); ?>">
						<div class="bm-mega-item-header">

							<!-- Label -->
							<span class="bm-mega-item-label">
								<?php echo $is_page ? '📄' : '🔗'; ?> <?php echo esc_html( $label ); ?>
							</span>

							<!-- Status badge -->
							<span class="bm-mega-badge <?php echo $mega_on ? 'bm-mega-badge-on' : 'bm-mega-badge-off'; ?>"
								id="bm-mega-badge-<?php echo esc_attr( $item_key ); ?>">
								<?php echo $mega_on ? '⚡ ' . esc_html__( 'ON', 'giuliomax-menu-builder' ) : esc_html__( 'OFF', 'giuliomax-menu-builder' ); ?>
							</span>

							<!-- Enable button — visible when OFF -->
							<button type="button"
								id="bm-mega-enable-<?php echo esc_attr( $item_key ); ?>"
								class="bm-mega-enable-btn"
								style="<?php echo $mega_on ? 'display:none;' : ''; ?>"
								onclick="menuxMegaToggle('<?php echo esc_js( $item_key ); ?>', true)">
								＋ <?php esc_html_e( 'Enable Mega Menu', 'giuliomax-menu-builder' ); ?>
							</button>

							<!-- Controls — visible when ON -->
							<div id="bm-mega-controls-<?php echo esc_attr( $item_key ); ?>"
								style="display:<?php echo $mega_on ? 'flex' : 'none'; ?>;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto;">

								<button type="button"
									class="bm-btn bm-btn-primary bm-btn-sm"
									id="bm-mega-edit-<?php echo esc_attr( $item_key ); ?>"
									onclick="menuxMegaOpen('<?php echo esc_js( $item_key ); ?>')">
									⚡ <?php esc_html_e( 'Edit Columns', 'giuliomax-menu-builder' ); ?> ▶
								</button>

								<label id="bm-mega-full-<?php echo esc_attr( $item_key ); ?>"
									style="display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:12px;color:#374151;">
									<input type="checkbox"
										name="mega_data[<?php echo esc_attr( $item_key ); ?>][mega_full_width]"
										value="1"
										<?php checked( $full_w ); ?>>
									<?php esc_html_e( 'Full width', 'giuliomax-menu-builder' ); ?>
								</label>

								<button type="button"
									style="font-size:11px;color:#9ca3af;background:none;border:none;cursor:pointer;padding:0;line-height:1;"
									onclick="menuxMegaToggle('<?php echo esc_js( $item_key ); ?>', false)">
									✕ <?php esc_html_e( 'Disable', 'giuliomax-menu-builder' ); ?>
								</button>
							</div>

							<!-- Hidden checkbox for form submission -->
							<input type="checkbox"
								class="bm-mega-toggle-cb"
								data-item-key="<?php echo esc_attr( $item_key ); ?>"
								name="mega_data[<?php echo esc_attr( $item_key ); ?>][mega_menu]"
								value="1"
								style="display:none;"
								<?php checked( $mega_on ); ?>>

							<!-- Hidden JSON field — keyed by item_key -->
							<input type="hidden"
								id="mega-json-<?php echo esc_attr( $item_key ); ?>"
								name="mega_data[<?php echo esc_attr( $item_key ); ?>][mega_columns_json]"
								value="<?php echo esc_attr( $cols_json ); ?>">

							<!-- Hidden style JSON field -->
							<input type="hidden"
								id="mega-style-json-<?php echo esc_attr( $item_key ); ?>"
								name="mega_data[<?php echo esc_attr( $item_key ); ?>][mega_style_json]"
								value="<?php echo esc_attr( ! empty( $item['mega_style'] ) ? wp_json_encode( $item['mega_style'] ) : '{}' ); ?>">

						</div>

						<!-- Hidden summary div — updated by mega editor on save (JS compat) -->
						<div id="bm-mega-summary-<?php echo esc_attr( $item_key ); ?>" style="display:none;"></div>
					</div>
				<?php endforeach; ?>
			</div>

			<?php endif; ?>
		</div>
	</div>

	<!-- ──── MEGA MENU EDITOR MODAL ──── -->
	<div id="menux-mega-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:999999;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto;" onclick="if(event.target===this)menuxMegaClose()">
		<div id="menux-mega-dialog" style="background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:min(1200px,98vw);font-family:-apple-system,sans-serif;overflow:hidden;">

			<!-- Header -->
			<div style="background:linear-gradient(135deg,#4f46e5,#7c3aed);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;">
				<div>
					<div style="color:rgba(255,255,255,.65);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;"><?php esc_html_e( 'Mega Menu Editor', 'giuliomax-menu-builder' ); ?></div>
					<div id="menux-mega-dialog-title" style="color:#fff;font-size:16px;font-weight:700;"><?php esc_html_e( 'Edit Columns', 'giuliomax-menu-builder' ); ?></div>
				</div>
				<div style="display:flex;gap:8px;align-items:center;">
					<button type="button" onclick="menuxMegaSave()" style="background:#fff;color:#4f46e5;border:none;padding:7px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;"><?php esc_html_e( 'Save', 'giuliomax-menu-builder' ); ?></button>
					<button type="button" onclick="menuxMegaClose()" style="background:rgba(255,255,255,.2);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;">&times;</button>
				</div>
			</div>

			<!-- Toolbar — always visible: the tab switcher lives here. Content-only
			     tools are wrapped so switching to Appearance hides them but never
			     the tabs themselves. -->
			<div id="menux-mega-content-toolbar" style="padding:10px 20px;background:#f8fafc;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
				<div id="menux-mega-content-tools" style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
					<div style="display:flex;align-items:center;gap:6px;">
						<span style="font-size:11px;font-weight:600;color:#6b7280;"><?php esc_html_e( 'Quick set:', 'giuliomax-menu-builder' ); ?></span>
						<?php foreach ( array( 1, 2, 3, 4 ) as $n ) : ?>
						<button type="button"
							class="bm-mega-col-count-btn"
							data-cols="<?php echo esc_attr( $n ); ?>"
							onclick="menuxMegaSetCols(<?php echo esc_attr( $n ); ?>)"
							style="width:28px;height:28px;border:2px solid #e5e7eb;border-radius:6px;background:#fff;font-size:12px;font-weight:700;cursor:pointer;color:#374151;">
							<?php echo esc_html( $n ); ?>
						</button>
						<?php endforeach; ?>
					</div>
					<button type="button" onclick="menuxMegaAddCol()" style="background:#ede9fe;color:#5b21b6;border:1px dashed #a78bfa;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">+ <?php esc_html_e( 'Add Column', 'giuliomax-menu-builder' ); ?></button>
					<button type="button" onclick="mxMegaDemoOpen()" style="background:#fef3c7;color:#92400e;border:1px solid #fbbf24;padding:5px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">✨ <?php esc_html_e( 'Presets', 'giuliomax-menu-builder' ); ?></button>
				</div>
				<!-- Tab switcher -->
				<div style="margin-left:auto;display:flex;gap:2px;background:#e5e7eb;border-radius:8px;padding:2px;">
					<button type="button" id="menux-mega-tab-content-btn"
						onclick="menuxMegaSwitchTab('content')"
						style="padding:5px 14px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#4f46e5;box-shadow:0 1px 3px rgba(0,0,0,.1);">
						📋 <?php esc_html_e( 'Content', 'giuliomax-menu-builder' ); ?>
					</button>
					<button type="button" id="menux-mega-tab-appear-btn"
						onclick="menuxMegaSwitchTab('appearance')"
						style="padding:5px 14px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer;background:transparent;color:#6b7280;">
						🎨 <?php esc_html_e( 'Appearance', 'giuliomax-menu-builder' ); ?>
					</button>
				</div>
			</div>

			<!-- Body: columns editor full-width -->
			<div style="display:flex;flex-direction:column;overflow:hidden;">

				<!-- Columns editor -->
				<div id="menux-mega-cols-wrap" style="display:flex;overflow-x:auto;align-items:stretch;min-height:420px;min-width:0;">
					<!-- Columns rendered by JS -->
				</div>

				<!-- Live preview — always visible -->
				<div id="menux-mega-preview-panel" style="display:block;border-top:2px solid #e5e7eb;background:#f1f5f9;">
					<!-- Nav bar simulation -->
					<div style="background:#1e293b;padding:8px 20px;display:flex;align-items:center;gap:16px;">
						<span style="color:#94a3b8;font-size:11px;"><?php esc_html_e( 'Home', 'giuliomax-menu-builder' ); ?></span>
						<span id="menux-mega-preview-trigger" style="color:#fff;font-size:11px;font-weight:600;border-bottom:2px solid #818cf8;padding-bottom:2px;"><?php esc_html_e( 'Menu item', 'giuliomax-menu-builder' ); ?> ▾</span>
						<span style="color:#94a3b8;font-size:11px;"><?php esc_html_e( 'About', 'giuliomax-menu-builder' ); ?></span>
						<span style="margin-left:auto;font-size:10px;color:#475569;"><?php esc_html_e( 'Approximate preview — actual look depends on your theme.', 'giuliomax-menu-builder' ); ?></span>
					</div>
					<!-- Preview content -->
					<div style="overflow-y:auto;max-height:340px;">
						<div id="menux-mega-preview" style="background:#fff;padding:16px;min-height:80px;">
							<div style="color:#9ca3af;font-size:11px;text-align:center;padding:20px 0;"><?php esc_html_e( 'Add columns to see the preview', 'giuliomax-menu-builder' ); ?></div>
						</div>
					</div>
				</div>

				<!-- Appearance panel — hidden by default, shown when Appearance tab is active -->
				<div id="menux-mega-appearance-panel" style="display:none;padding:20px 24px;overflow-y:auto;max-height:600px;">

					<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
						<div>
							<div style="font-size:14px;font-weight:700;color:#1f2937;"><?php esc_html_e( 'Panel Appearance', 'giuliomax-menu-builder' ); ?></div>
							<div style="font-size:12px;color:#6b7280;margin-top:2px;"><?php esc_html_e( 'These settings override the global defaults for this mega menu only.', 'giuliomax-menu-builder' ); ?></div>
						</div>
						<button type="button" onclick="menuxMegaResetStyle()"
							style="background:#fff;border:1px solid #e5e7eb;color:#6b7280;padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;">
							↺ <?php esc_html_e( 'Reset to global defaults', 'giuliomax-menu-builder' ); ?>
						</button>
					</div>

					<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 20px;align-items:end;">

						<!-- Background -->
						<div style="grid-column:1/-1;">
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:6px;"><?php esc_html_e( 'Panel Background', 'giuliomax-menu-builder' ); ?></label>
							<div id="bm-ms-bg-swatch" style="height:32px;border-radius:7px;border:1px solid #e5e7eb;margin-bottom:8px;cursor:pointer;background:transparent;" onclick="document.getElementById('bm-ms-bg-details').open=!document.getElementById('bm-ms-bg-details').open"></div>
							<!-- Preset swatches -->
							<div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;">
								<?php foreach ( $gradient_presets as $preset ) : ?>
								<div onclick="mxMsPickBg('<?php echo esc_js( $preset['value'] ); ?>')"
									title="<?php echo esc_attr( $preset['label'] ); ?>"
									style="width:32px;height:32px;border-radius:6px;cursor:pointer;background:<?php echo esc_attr( $preset['value'] ); ?>;border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:border-color .1s;"
									onmouseenter="this.style.borderColor='#4f46e5'" onmouseleave="this.style.borderColor='transparent'">
								</div>
								<?php endforeach; ?>
								<!-- "None / inherit" swatch -->
								<div onclick="mxMsPickBg('')"
									title="<?php esc_attr_e( 'Inherit from global', 'giuliomax-menu-builder' ); ?>"
									style="width:32px;height:32px;border-radius:6px;cursor:pointer;background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 4px,#fff 4px,#fff 8px);border:2px solid transparent;box-shadow:0 1px 3px rgba(0,0,0,.1);"
									onmouseenter="this.style.borderColor='#4f46e5'" onmouseleave="this.style.borderColor='transparent'">
								</div>
							</div>
							<details id="bm-ms-bg-details" style="margin-top:4px;">
								<summary style="font-size:11px;color:#6b7280;cursor:pointer;font-weight:600;">⚙ <?php esc_html_e( 'Custom color / gradient', 'giuliomax-menu-builder' ); ?></summary>
								<div style="margin-top:8px;padding:10px;background:#fff;border-radius:6px;border:1px solid #e5e7eb;">
									<div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #f3f4f6;">
										<span style="font-size:11px;font-weight:600;color:#374151;white-space:nowrap;"><?php esc_html_e( 'Solid', 'giuliomax-menu-builder' ); ?></span>
										<input type="color" id="bm-ms-solid-color" value="#ffffff" style="width:36px;height:26px;padding:1px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;">
										<button type="button" onclick="mxMsPickBg(document.getElementById('bm-ms-solid-color').value)" style="background:#374151;color:#fff;border:none;padding:4px 12px;border-radius:4px;font-size:11px;cursor:pointer;font-weight:600;"><?php esc_html_e( 'Apply', 'giuliomax-menu-builder' ); ?></button>
									</div>
									<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
										<span style="font-size:11px;font-weight:600;color:#374151;white-space:nowrap;"><?php esc_html_e( 'Gradient', 'giuliomax-menu-builder' ); ?></span>
										<select id="bm-ms-grad-dir" style="font-size:11px;height:26px;padding:2px 4px;border-radius:4px;border:1px solid #d1d5db;">
											<option value="135deg">↘ 135°</option>
											<option value="to right">→ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?></option>
											<option value="to bottom">↓ <?php esc_html_e( 'Down', 'giuliomax-menu-builder' ); ?></option>
											<option value="45deg">↗ 45°</option>
										</select>
										<input type="color" id="bm-ms-grad-c1" value="#4f46e5" style="width:36px;height:26px;padding:1px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;">
										<span style="font-size:12px;color:#9ca3af;">→</span>
										<input type="color" id="bm-ms-grad-c2" value="#7c3aed" style="width:36px;height:26px;padding:1px;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;">
										<button type="button" onclick="mxMsApplyGrad()" style="background:#4f46e5;color:#fff;border:none;padding:4px 12px;border-radius:4px;font-size:11px;cursor:pointer;font-weight:600;"><?php esc_html_e( 'Apply', 'giuliomax-menu-builder' ); ?></button>
									</div>
								</div>
							</details>
							<input type="hidden" id="bm-ms-bg-val" value="">
						</div>

						<!-- Padding Y -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Padding Top/Bottom (px)', 'giuliomax-menu-builder' ); ?></label>
							<input type="number" id="bm-ms-pad-y" placeholder="<?php esc_attr_e( 'Global default', 'giuliomax-menu-builder' ); ?>" min="0" max="80" class="bm-input" style="width:100%;">
						</div>

						<!-- Padding X -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Padding Left/Right (px)', 'giuliomax-menu-builder' ); ?></label>
							<input type="number" id="bm-ms-pad-x" placeholder="<?php esc_attr_e( 'Global default', 'giuliomax-menu-builder' ); ?>" min="0" max="120" class="bm-input" style="width:100%;">
						</div>

						<!-- Column gap -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Column Gap (px)', 'giuliomax-menu-builder' ); ?></label>
							<input type="number" id="bm-ms-gap" placeholder="<?php esc_attr_e( 'Global default', 'giuliomax-menu-builder' ); ?>" min="0" max="80" class="bm-input" style="width:100%;">
						</div>

						<!-- Border radius -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Border Radius (px)', 'giuliomax-menu-builder' ); ?></label>
							<input type="number" id="bm-ms-radius" placeholder="<?php esc_attr_e( 'Global default', 'giuliomax-menu-builder' ); ?>" min="1" max="40" class="bm-input" style="width:100%;">
						</div>

						<!-- Font size -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Font Size (px)', 'giuliomax-menu-builder' ); ?></label>
							<input type="number" id="bm-ms-font" placeholder="<?php esc_attr_e( 'Global default', 'giuliomax-menu-builder' ); ?>" min="10" max="24" class="bm-input" style="width:100%;">
						</div>

						<!-- Max width: constrains the PANEL box itself (centered), not just
						     the inner content like the global Max Width setting does.
						     Only effective for full-width panels — the field is disabled
						     (greyed out via JS _syncMaxWState) when Full width is off. -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Panel Max Width (px)', 'giuliomax-menu-builder' ); ?> <span style="font-weight:400;color:#9ca3af;"><?php esc_html_e( '— full width only', 'giuliomax-menu-builder' ); ?></span></label>
							<input type="number" id="bm-ms-max-w" placeholder="<?php esc_attr_e( 'Full width', 'giuliomax-menu-builder' ); ?>" min="400" max="2400" class="bm-input" style="width:100%;">
						</div>

						<!-- Link color -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Link Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-link-use" value="1">
								<input type="color" id="bm-ms-link" value="#374151" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Heading color -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Heading Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-head-use" value="1">
								<input type="color" id="bm-ms-head" value="#9ca3af" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Accent color -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Accent / Icon Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-accent-use" value="1">
								<input type="color" id="bm-ms-accent" value="#667eea" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Hover color -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Link Hover Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-hover-use" value="1">
								<input type="color" id="bm-ms-hover" value="#111827" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Description color -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Description Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-desc-use" value="1">
								<input type="color" id="bm-ms-desc" value="#9ca3af" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Divider -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Divider Color', 'giuliomax-menu-builder' ); ?></label>
							<div style="display:flex;align-items:center;gap:6px;">
								<input type="checkbox" id="bm-ms-divider-use" value="1">
								<input type="color" id="bm-ms-divider" value="#e5e7eb" style="width:40px;height:28px;padding:1px;border:1px solid #d1d5db;border-radius:5px;cursor:pointer;">
							</div>
						</div>

						<!-- Divider style -->
						<div>
							<label style="display:block;font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;"><?php esc_html_e( 'Divider Style', 'giuliomax-menu-builder' ); ?></label>
							<select id="bm-ms-divider-style" class="bm-input" style="width:100%;">
								<option value=""><?php esc_html_e( 'Global default', 'giuliomax-menu-builder' ); ?></option>
								<option value="solid"><?php esc_html_e( 'Solid', 'giuliomax-menu-builder' ); ?></option>
								<option value="dashed"><?php esc_html_e( 'Dashed', 'giuliomax-menu-builder' ); ?></option>
								<option value="dotted"><?php esc_html_e( 'Dotted', 'giuliomax-menu-builder' ); ?></option>
							</select>
						</div>

					</div><!-- /grid -->
				</div><!-- /menux-mega-appearance-panel -->

			</div><!-- /body wrapper -->

			<!-- Footer -->
			<div style="padding:12px 20px;border-top:1px solid #f0f0f0;background:#fafafa;display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 16px 16px;">
				<button type="button" onclick="menuxMegaClose()" style="background:#fff;border:1px solid #d1d5db;color:#374151;padding:7px 18px;border-radius:8px;font-size:13px;cursor:pointer;"><?php esc_html_e( 'Cancel', 'giuliomax-menu-builder' ); ?></button>
				<button type="button" onclick="menuxMegaSave()" style="background:linear-gradient(135deg,#4f46e5,#7c3aed);border:none;color:#fff;padding:7px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;"><?php esc_html_e( 'Save Megamenu', 'giuliomax-menu-builder' ); ?></button>
			</div>
		</div>
	</div>

	<script>
	window.menuxMegaDefaults = <?php
		$_d  = get_option( 'menux_style', array() );
		$_bg = ! empty( $_d['mega_bg_gradient'] ) ? $_d['mega_bg_gradient']
		     : ( ! empty( $_d['mega_bg'] ) ? $_d['mega_bg'] : '#ffffff' );
		echo wp_json_encode( array(
			'bg'      => $_bg,
			'pad_y'   => isset( $_d['mega_padding_y'] )      ? (int) $_d['mega_padding_y']      : 24,
			'pad_x'   => isset( $_d['mega_padding_x'] )      ? (int) $_d['mega_padding_x']      : 32,
			'gap'     => isset( $_d['mega_col_gap'] )         ? (int) $_d['mega_col_gap']        : 16,
			'link'    => ! empty( $_d['mega_link_color'] )       ? $_d['mega_link_color']       : '#374151',
			'head'    => ! empty( $_d['mega_heading_color'] )    ? $_d['mega_heading_color']    : '#9ca3af',
			'desc'    => ! empty( $_d['mega_desc_color'] )       ? $_d['mega_desc_color']       : '#9ca3af',
			'accent'  => ! empty( $_d['mega_accent_color'] )     ? $_d['mega_accent_color']     : '#667eea',
			'hover'   => ! empty( $_d['mega_link_hover_color'] ) ? $_d['mega_link_hover_color'] : '#667eea',
			'divider' => ! empty( $_d['mega_divider_color'] )    ? $_d['mega_divider_color']    : '#e5e7eb',
		) );
	?>;

	function mxMsPickBg(val) {
		var inp = document.getElementById('bm-ms-bg-val');
		var sw  = document.getElementById('bm-ms-bg-swatch');
		if (inp) inp.value = val;
		if (sw)  sw.style.background = val || 'transparent';
		// Also update _style.bg so renderPreview picks it up immediately
		if (typeof menuxMegaSetStyleBg === 'function') menuxMegaSetStyleBg(val);
		var det = document.getElementById('bm-ms-bg-details');
		if (det) det.open = false;
	}
	function mxMsApplyGrad() {
		var dir = document.getElementById('bm-ms-grad-dir');
		var c1  = document.getElementById('bm-ms-grad-c1');
		var c2  = document.getElementById('bm-ms-grad-c2');
		if (!dir || !c1 || !c2) return;
		mxMsPickBg('linear-gradient(' + dir.value + ', ' + c1.value + ', ' + c2.value + ')');
	}
	</script>
	<?php
}
