<?php

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

$groups = isset( $groups ) && is_array( $groups ) ? $groups : array();
$cur    = function_exists( 'get_woocommerce_currency_symbol' ) ? get_woocommerce_currency_symbol() : '';
?>
<style>
.aieo-og-wrap .aieo-dmm-card{max-width:100%;padding:16px 20px;}
.aieo-og-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
.aieo-og-table th,.aieo-og-table td{padding:7px 8px;border-bottom:1px solid #eef0f2;text-align:left;vertical-align:middle;}
.aieo-og-table th{font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.03em;}
.aieo-og-table td.num,.aieo-og-table th.num{text-align:right;white-space:nowrap;}
.aieo-og-form label{font-size:12px;color:#374151;font-weight:600;display:block;margin:10px 0 3px;}
.aieo-og-form input[type=text],.aieo-og-form input[type=number],.aieo-og-form select,.aieo-og-form textarea{max-width:340px;}
.aieo-og-inline{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;}
.aieo-og-inline > div{flex:0 0 auto;}
.aieo-og-pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;background:#eef2ff;color:#3730a3;}
.aieo-og-muted{color:#646970;font-size:12px;}
#aieo-og-status{margin-left:10px;font-size:12px;}
.aieo-og-opt-row td{border-bottom:1px solid #f3f4f6;}
.aieo-og-hidden{display:none;}
</style>

<div class="aieo-og-wrap" id="aieo-og-root" data-nonce="<?php echo esc_attr( $nonce ); ?>">
	<h2><?php esc_html_e( 'Product Options', 'ai-eshop-optimizer' ); ?></h2>
	<p class="description" style="max-width:760px;">
		<?php esc_html_e( 'Reusable option groups (sizes, extras, with/without choices) you can attach to any product. Single-select or multi-select, with min/max counts, per-option prices, a free-allowance, and live availability. Attach them to a product from its “Options” tab on the product edit screen.', 'ai-eshop-optimizer' ); ?>
	</p>

	<?php ?>
	<div class="aieo-dmm-card">
		<h3 style="margin-top:0;display:flex;align-items:center;gap:12px;">
			<?php esc_html_e( 'Option groups', 'ai-eshop-optimizer' ); ?>
			<button type="button" class="button button-primary" id="aieo-og-new"><?php esc_html_e( 'New group', 'ai-eshop-optimizer' ); ?></button>
			<span id="aieo-og-status"></span>
		</h3>
		<?php if ( empty( $groups ) ) : ?>
			<p class="aieo-og-muted" id="aieo-og-empty"><?php esc_html_e( 'No option groups yet — create your first one.', 'ai-eshop-optimizer' ); ?></p>
		<?php endif; ?>
		<table class="aieo-og-table" id="aieo-og-list"<?php echo empty( $groups ) ? ' style="display:none;"' : ''; ?>>
			<thead><tr>
				<th><?php esc_html_e( 'Name', 'ai-eshop-optimizer' ); ?></th>
				<th><?php esc_html_e( 'Type', 'ai-eshop-optimizer' ); ?></th>
				<th><?php esc_html_e( 'Select', 'ai-eshop-optimizer' ); ?></th>
				<th><?php esc_html_e( 'Free', 'ai-eshop-optimizer' ); ?></th>
				<th class="num"><?php esc_html_e( 'Options', 'ai-eshop-optimizer' ); ?></th>
				<th class="num"><?php esc_html_e( 'Products', 'ai-eshop-optimizer' ); ?></th>
				<th></th>
			</tr></thead>
			<tbody>
			<?php foreach ( $groups as $g ) :
				$min = (int) $g['min_select']; $max = (int) $g['max_select'];
				$sel = $min . '–' . ( $max > 0 ? $max : '∞' );
				$free = (int) $g['included_free'] > 0 ? ( (int) $g['included_free'] . ' (' . ( 'cheapest_free' === $g['free_policy'] ? esc_html__( 'cheapest', 'ai-eshop-optimizer' ) : esc_html__( 'priciest', 'ai-eshop-optimizer' ) ) . ')' ) : '—';
			?>
				<tr data-id="<?php echo esc_attr( $g['id'] ); ?>">
					<td><strong><?php echo esc_html( $g['name'] ); ?></strong></td>
					<td><span class="aieo-og-pill"><?php echo esc_html( ucfirst( (string) $g['select_type'] ) ); ?></span></td>
					<td><?php echo esc_html( $sel ); ?></td>
					<td><?php echo esc_html( $free ); ?></td>
					<td class="num"><?php echo (int) $g['option_count']; ?></td>
					<td class="num"><?php echo (int) $g['product_count']; ?></td>
					<td class="num"><a href="#" class="aieo-og-edit"><?php esc_html_e( 'Edit', 'ai-eshop-optimizer' ); ?></a> · <a href="#" class="aieo-og-del" data-which="groups"><?php esc_html_e( 'Delete', 'ai-eshop-optimizer' ); ?></a></td>
				</tr>
			<?php endforeach; ?>
			</tbody>
		</table>
	</div>

	<?php ?>
	<div class="aieo-dmm-card aieo-og-hidden" id="aieo-og-editor">
		<h3 style="margin-top:0;" id="aieo-og-editor-title"><?php esc_html_e( 'New group', 'ai-eshop-optimizer' ); ?></h3>
		<form class="aieo-og-form" id="aieo-og-group-form" onsubmit="return false;">
			<input type="hidden" id="aieo-og-group-id" value="0">
			<div class="aieo-og-inline">
				<div style="flex:1 1 260px;">
					<label><?php esc_html_e( 'Name', 'ai-eshop-optimizer' ); ?></label>
					<input type="text" id="aieo-og-name" class="regular-text" placeholder="<?php esc_attr_e( 'e.g. Toppings, Portion, Extras', 'ai-eshop-optimizer' ); ?>">
				</div>
				<div>
					<label><?php esc_html_e( 'Selection', 'ai-eshop-optimizer' ); ?></label>
					<select id="aieo-og-type">
						<option value="checkbox"><?php esc_html_e( 'Multi-select (checkbox)', 'ai-eshop-optimizer' ); ?></option>
						<option value="radio"><?php esc_html_e( 'Single-select (radio)', 'ai-eshop-optimizer' ); ?></option>
					</select>
				</div>
				<div>
					<label><?php esc_html_e( 'Min', 'ai-eshop-optimizer' ); ?></label>
					<input type="number" id="aieo-og-min" min="0" step="1" value="0" style="width:70px;">
				</div>
				<div>
					<label><?php esc_html_e( 'Max (0 = ∞)', 'ai-eshop-optimizer' ); ?></label>
					<input type="number" id="aieo-og-max" min="0" step="1" value="0" style="width:70px;">
				</div>
			</div>
			<div class="aieo-og-inline">
				<div>
					<label><?php esc_html_e( 'Free allowance', 'ai-eshop-optimizer' ); ?></label>
					<input type="number" id="aieo-og-free" min="0" step="1" value="0" style="width:70px;">
				</div>
				<div>
					<label><?php esc_html_e( 'Allowance waives the', 'ai-eshop-optimizer' ); ?></label>
					<select id="aieo-og-policy">
						<option value="expensive_free"><?php esc_html_e( 'Priciest (customer-favourable)', 'ai-eshop-optimizer' ); ?></option>
						<option value="cheapest_free"><?php esc_html_e( 'Cheapest (charge premium extras)', 'ai-eshop-optimizer' ); ?></option>
					</select>
				</div>
				<div style="flex:1 1 260px;">
					<label><?php esc_html_e( 'Description (optional)', 'ai-eshop-optimizer' ); ?></label>
					<input type="text" id="aieo-og-desc" class="regular-text" style="max-width:100%;">
				</div>
			</div>
			<p style="margin-top:14px;">
				<button type="submit" class="button button-primary" id="aieo-og-save-group"><?php esc_html_e( 'Save group', 'ai-eshop-optimizer' ); ?></button>
				<button type="button" class="button" id="aieo-og-cancel"><?php esc_html_e( 'Close', 'ai-eshop-optimizer' ); ?></button>
			</p>
		</form>

		<?php ?>
		<div id="aieo-og-options-wrap" class="aieo-og-hidden">
			<h4 style="margin:18px 0 4px;"><?php esc_html_e( 'Options', 'ai-eshop-optimizer' ); ?></h4>
			<table class="aieo-og-table" id="aieo-og-options">
				<thead><tr>
					<th><?php esc_html_e( 'Label', 'ai-eshop-optimizer' ); ?></th>
					<th class="num"><?php echo esc_html( sprintf( __( 'Price (%s)', 'ai-eshop-optimizer' ), $cur ?: '' ) ); ?></th>
					<th><?php esc_html_e( 'Default', 'ai-eshop-optimizer' ); ?></th>
					<th><?php esc_html_e( 'Always charged', 'ai-eshop-optimizer' ); ?></th>
					<th><?php esc_html_e( 'Stock / availability', 'ai-eshop-optimizer' ); ?></th>
					<th></th>
				</tr></thead>
				<tbody></tbody>
			</table>
			<div class="aieo-og-inline" style="margin-top:10px;">
				<div style="flex:1 1 200px;"><label><?php esc_html_e( 'Add option', 'ai-eshop-optimizer' ); ?></label>
					<input type="text" id="aieo-og-opt-label" placeholder="<?php esc_attr_e( 'e.g. Extra cheese', 'ai-eshop-optimizer' ); ?>" style="max-width:100%;"></div>
				<div><label><?php esc_html_e( 'Price', 'ai-eshop-optimizer' ); ?></label>
					<input type="number" id="aieo-og-opt-price" step="0.01" value="0" style="width:90px;"></div>
				<div><label><?php esc_html_e( 'Linked SKU (optional)', 'ai-eshop-optimizer' ); ?></label>
					<input type="text" id="aieo-og-opt-sku" placeholder="<?php esc_attr_e( 'stock source', 'ai-eshop-optimizer' ); ?>" style="width:140px;"></div>
				<div><label><?php esc_html_e( 'Availability', 'ai-eshop-optimizer' ); ?></label>
					<select id="aieo-og-opt-avail">
						<option value="auto"><?php esc_html_e( 'Auto (follow stock)', 'ai-eshop-optimizer' ); ?></option>
						<option value="in_stock"><?php esc_html_e( 'In stock', 'ai-eshop-optimizer' ); ?></option>
						<option value="out_of_stock"><?php esc_html_e( 'Sold out', 'ai-eshop-optimizer' ); ?></option>
					</select></div>
				<div><label><input type="checkbox" id="aieo-og-opt-default"> <?php esc_html_e( 'Default', 'ai-eshop-optimizer' ); ?></label>
					<label style="margin-top:4px;"><input type="checkbox" id="aieo-og-opt-premium"> <?php esc_html_e( 'Always charged', 'ai-eshop-optimizer' ); ?></label></div>
				<div><label>&nbsp;</label><button type="button" class="button" id="aieo-og-add-option"><?php esc_html_e( 'Add', 'ai-eshop-optimizer' ); ?></button></div>
			</div>
			<p class="aieo-og-muted" style="margin-top:6px;"><?php esc_html_e( 'Use the “Rules” link on an option to add size-dependent or per-product price overrides; the flat price above is the fallback.', 'ai-eshop-optimizer' ); ?></p>

			<?php ?>
			<div id="aieo-og-rules" class="aieo-og-hidden" style="margin-top:14px;border-top:1px solid #e6e9ee;padding-top:12px;">
				<h4 style="margin:0 0 4px;"><?php esc_html_e( 'Price rules', 'ai-eshop-optimizer' ); ?> — <span id="aieo-og-rules-opt"></span>
					<a href="#" id="aieo-og-rules-close" style="font-size:12px;font-weight:400;margin-left:10px;"><?php esc_html_e( 'close', 'ai-eshop-optimizer' ); ?></a></h4>
				<p class="aieo-og-muted" style="margin:0 0 8px;"><?php esc_html_e( 'A rule overrides this option’s flat price when it matches. Leave a field blank to ignore it. The most specific matching rule wins.', 'ai-eshop-optimizer' ); ?></p>
				<input type="hidden" id="aieo-og-rules-oid" value="0">
				<table class="aieo-og-table" id="aieo-og-rules-list"><tbody></tbody></table>
				<div class="aieo-og-inline" style="margin-top:8px;">
					<div><label><?php esc_html_e( 'When group', 'ai-eshop-optimizer' ); ?></label>
						<select id="aieo-og-rule-wgroup"><option value="0">— <?php esc_html_e( 'any', 'ai-eshop-optimizer' ); ?> —</option></select></div>
					<div><label><?php esc_html_e( 'is', 'ai-eshop-optimizer' ); ?></label>
						<select id="aieo-og-rule-woption" disabled><option value="0">—</option></select></div>
					<div><label><?php esc_html_e( 'Only on product', 'ai-eshop-optimizer' ); ?></label>
						<select id="aieo-og-rule-scope"><option value="0"><?php esc_html_e( 'All products', 'ai-eshop-optimizer' ); ?></option></select></div>
					<div><label><?php esc_html_e( 'Price', 'ai-eshop-optimizer' ); ?></label>
						<input type="number" id="aieo-og-rule-price" step="0.01" value="0" style="width:90px;"></div>
					<div><label>&nbsp;</label><button type="button" class="button" id="aieo-og-rule-add"><?php esc_html_e( 'Add rule', 'ai-eshop-optimizer' ); ?></button></div>
				</div>
			</div>
		</div>
	</div>
</div>
