<?php
/**
 * MenuX — WooCommerce Settings Panel
 * Admin UI for the cart icon / mini-cart feature.
 * @package MenuX
 */

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

function menux_render_woocommerce_panel( $style = array() ) {
	$s = wp_parse_args( (array) $style, menux_style_defaults() );

	$woo_active = function_exists( 'menux_woo_active' ) ? menux_woo_active() : class_exists( 'WooCommerce' );
	$enabled    = $s['woo_cart_enabled'] === '1';
	$position   = $s['woo_cart_position']   ?? 'right';
	$icon       = $s['woo_cart_icon']       ?? 'cart';
	$show_count = $s['woo_cart_show_count'] === '1';
	$show_total = $s['woo_cart_show_total'] === '1';
	$minicart   = $s['woo_cart_minicart']   ?? 'hover';
	$hide_empty = $s['woo_cart_hide_empty'] === '1';
	$icon_color = $s['woo_cart_icon_color'] ?? '';
	$badge_bg   = $s['woo_cart_badge_bg']   ?? '#ef4444';
	?>
	<style>
	.mx-woo-master{
		display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
		background:linear-gradient(135deg,#f5f3ff,#ede9fe);
		border:2px solid #c4b5fd;border-radius:12px;padding:18px 22px;margin-bottom:6px;
	}
	.mx-woo-master-text h3{margin:0 0 4px;font-size:15px;font-weight:700;color:#5b21b6;}
	.mx-woo-master-text p{margin:0;font-size:12px;color:#6d28d9;line-height:1.5;}
	.mx-woo-warn{
		background:#fffbeb;border:1px solid #fcd34d;border-radius:10px;
		padding:14px 18px;color:#92400e;font-size:13px;line-height:1.6;margin-bottom:14px;
	}
	.mx-woo-warn strong{color:#78350f;}
	</style>

	<div class="bm-card">
		<div class="bm-card-header">
			<span class="bm-card-icon">🛒</span>
			<div class="bm-card-titles">
				<h2 class="bm-card-title"><?php esc_html_e( 'WooCommerce Cart', 'giuliomax-menu-builder' ); ?></h2>
				<p class="bm-card-subtitle"><?php esc_html_e( 'Show a cart icon with a live item count and a mini-cart dropdown inside your menu', 'giuliomax-menu-builder' ); ?></p>
			</div>
		</div>
		<div class="bm-card-body">

			<?php if ( ! $woo_active ) : ?>
			<div class="mx-woo-warn">
				⚠ <strong><?php esc_html_e( 'WooCommerce is not active.', 'giuliomax-menu-builder' ); ?></strong> <?php esc_html_e( 'You can configure the cart here, but it will only appear on the front end once WooCommerce is installed and activated.', 'giuliomax-menu-builder' ); ?>
			</div>
			<?php endif; ?>

			<!-- Master toggle -->
			<div class="mx-woo-master">
				<div class="mx-woo-master-text">
					<h3><?php esc_html_e( 'Enable cart icon', 'giuliomax-menu-builder' ); ?></h3>
					<p><?php esc_html_e( 'Adds a cart icon to the navigation bar. The count and mini-cart update live when products are added.', 'giuliomax-menu-builder' ); ?></p>
				</div>
				<label class="mx-toggle">
					<input type="checkbox" name="menux_style[woo_cart_enabled]" value="1" id="mx-woo-master-toggle" <?php checked( $enabled ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
					<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					<span class="mx-toggle-label"><?php echo $enabled ? esc_html__( 'On', 'giuliomax-menu-builder' ) : esc_html__( 'Off', 'giuliomax-menu-builder' ); ?></span>
				</label>
			</div>

			<!-- Settings (dimmed when disabled) -->
			<div id="mx-woo-settings" style="<?php echo $enabled ? '' : 'opacity:.45;pointer-events:none;'; ?>">

				<div class="mx-section"><?php esc_html_e( 'Appearance', 'giuliomax-menu-builder' ); ?></div>

				<!-- Icon style -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Cart icon', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Choose the icon shown in the nav bar', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<div class="mx-radio-group">
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_icon]" value="cart" <?php checked( $icon, 'cart' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							<i class="fa-solid fa-cart-shopping"></i> <?php esc_html_e( 'Cart', 'giuliomax-menu-builder' ); ?>
						</label>
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_icon]" value="bag" <?php checked( $icon, 'bag' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							<i class="fa-solid fa-bag-shopping"></i> <?php esc_html_e( 'Bag', 'giuliomax-menu-builder' ); ?>
						</label>
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_icon]" value="basket" <?php checked( $icon, 'basket' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							<i class="fa-solid fa-basket-shopping"></i> <?php esc_html_e( 'Basket', 'giuliomax-menu-builder' ); ?>
						</label>
					</div>
				</div>

				<!-- Position -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Position', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Where the cart appears relative to the menu items', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<div class="mx-radio-group">
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_position]" value="left" <?php checked( $position, 'left' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							⬅ <?php esc_html_e( 'Left', 'giuliomax-menu-builder' ); ?>
						</label>
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_position]" value="right" <?php checked( $position, 'right' ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							➡ <?php esc_html_e( 'Right', 'giuliomax-menu-builder' ); ?>
						</label>
					</div>
				</div>

				<!-- Icon color -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Icon color', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Color of the cart icon (and total) in the nav bar', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<div class="mx-color-row">
						<div style="display:flex;align-items:center;gap:6px;">
							<label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#6b7280;cursor:pointer;">
								<input type="checkbox" name="menux_style_use[woo_cart_icon_color]" value="1" id="mx-woo-color-use" <?php checked( ! empty( $icon_color ) ); ?> onchange="document.getElementById('mx-woo-icon-color').disabled=!this.checked;document.getElementById('mx-woo-color-swatch').style.opacity=this.checked?'1':'.4';if(typeof menux_updatePreview==='function')menux_updatePreview()">
								<?php esc_html_e( 'Custom', 'giuliomax-menu-builder' ); ?>
							</label>
							<div class="mx-color-swatch" id="mx-woo-color-swatch" style="opacity:<?php echo ! empty( $icon_color ) ? '1' : '.4'; ?>;">
								<input type="color" id="mx-woo-icon-color" name="menux_style[woo_cart_icon_color]"
									value="<?php echo esc_attr( $icon_color ?: '#374151' ); ?>"
									<?php echo empty( $icon_color ) ? 'disabled' : ''; ?> oninput="if(typeof menux_updatePreview==='function')menux_updatePreview()">
							</div>
							<span class="mx-color-hex"><?php echo ! empty( $icon_color ) ? esc_html( $icon_color ) : 'inherit'; ?></span>
						</div>
					</div>
				</div>

				<!-- Badge color -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Count badge color', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Background of the little number badge', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<div class="mx-color-row">
						<div class="mx-color-swatch">
							<input type="color" name="menux_style[woo_cart_badge_bg]" value="<?php echo esc_attr( $badge_bg ?: '#ef4444' ); ?>" oninput="if(typeof menux_updatePreview==='function')menux_updatePreview()">
						</div>
						<span class="mx-color-hex"><?php echo esc_html( $badge_bg ?: '#ef4444' ); ?></span>
					</div>
				</div>

				<div class="mx-section"><?php esc_html_e( 'Behavior', 'giuliomax-menu-builder' ); ?></div>

				<!-- Item count -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Show item count', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Display the number of items as a badge on the icon', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<label class="mx-toggle">
						<input type="checkbox" name="menux_style[woo_cart_show_count]" value="1" <?php checked( $show_count ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>

				<!-- Cart total -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Show cart total', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Display the cart subtotal next to the icon', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<label class="mx-toggle">
						<input type="checkbox" name="menux_style[woo_cart_show_total]" value="1" <?php checked( $show_total ); ?> onchange="if(typeof menux_updatePreview==='function')menux_updatePreview()">
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>

				<!-- Hide when empty -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Hide when empty', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'Hide the cart icon entirely while the cart has no items', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<label class="mx-toggle">
						<input type="checkbox" name="menux_style[woo_cart_hide_empty]" value="1" <?php checked( $hide_empty ); ?>>
						<span class="mx-toggle-track"><span class="mx-toggle-thumb"></span></span>
					</label>
				</div>

				<!-- Mini-cart behavior -->
				<div class="mx-row">
					<div>
						<div class="mx-row-label"><?php esc_html_e( 'Mini-cart dropdown', 'giuliomax-menu-builder' ); ?></div>
						<div class="mx-row-sub"><?php esc_html_e( 'How the dropdown preview of cart contents opens', 'giuliomax-menu-builder' ); ?></div>
					</div>
					<div class="mx-radio-group">
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_minicart]" value="hover" <?php checked( $minicart, 'hover' ); ?>>
							🖱 <?php esc_html_e( 'On hover', 'giuliomax-menu-builder' ); ?>
						</label>
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_minicart]" value="click" <?php checked( $minicart, 'click' ); ?>>
							👆 <?php esc_html_e( 'On click', 'giuliomax-menu-builder' ); ?>
						</label>
						<label class="mx-radio-pill">
							<input type="radio" name="menux_style[woo_cart_minicart]" value="off" <?php checked( $minicart, 'off' ); ?>>
							🚫 <?php esc_html_e( 'Off (link to cart)', 'giuliomax-menu-builder' ); ?>
						</label>
					</div>
				</div>

			</div><!-- /mx-woo-settings -->

		</div>
	</div>

	<script>
	(function(){
		var toggle = document.getElementById('mx-woo-master-toggle');
		var settings = document.getElementById('mx-woo-settings');
		var label = toggle ? toggle.closest('label').querySelector('.mx-toggle-label') : null;
		if (toggle && settings) {
			toggle.addEventListener('change', function() {
				settings.style.opacity = this.checked ? '' : '.45';
				settings.style.pointerEvents = this.checked ? '' : 'none';
				if (label) label.textContent = this.checked ? 'On' : 'Off';
			});
		}
		document.querySelectorAll('#mx-woo-settings input[type=color]').forEach(function(ci){
			var hex = ci.closest('.mx-color-row').querySelector('.mx-color-hex');
			if (hex) ci.addEventListener('input', function(){ hex.textContent = this.value; });
		});
	})();
	</script>
	<?php
}
