<?php
if ( ! defined( 'ABSPATH' ) ) { exit; }
?>
<div id="lumina-standalone-wrapper" class="lumina-dark-violet-theme">
	<!-- Left Editing Tools Panel -->
	<aside class="lumina-left-bar">
		<div class="lumina-app-brand">⚡ LUMINA STUDIO</div>
		
		<div class="lumina-btn-group">
			<label class="lumina-label">ADD SHAPES & TEXT</label>
			<button type="button" class="lumina-icon-btn" id="btn-add-text">✏️ Add Text</button>
			<button type="button" class="lumina-icon-btn" id="btn-add-rect">🔲 Rectangle</button>
			<button type="button" class="lumina-icon-btn" id="btn-add-circle">⭕ Circle</button>
		</div>

		<div class="lumina-btn-group">
			<label class="lumina-label">IMAGE & TRACING</label>
			<label class="lumina-icon-btn lumina-upload-label">
				📁 Upload Image
				<input type="file" id="image-upload" accept="image/*,.svg" style="display:none;">
			</label>
			<button type="button" class="lumina-icon-btn" id="btn-trace-image">🌀 Vector Trace (BMP->SVG)</button>
			<button type="button" class="lumina-icon-btn" id="btn-remove-bg">✂️ Erase Background</button>
		</div>

		<div class="lumina-btn-group">
			<label class="lumina-label">ACTIONS & LAYERS</label>
			<button type="button" class="lumina-icon-btn" id="btn-layer-up">🔼 Bring Forward</button>
			<button type="button" class="lumina-icon-btn" id="btn-layer-down">🔽 Send Backward</button>
			<button type="button" class="lumina-icon-btn lumina-btn-danger" id="btn-delete-item">🗑️ Delete Selected</button>
		</div>
	</aside>

	<!-- Main Workbench Area -->
	<main class="lumina-workbench">
		<div class="lumina-canvas-board">
			<canvas id="lumina-canvas" width="600" height="450"></canvas>
		</div>
	</main>

	<!-- Right Production Settings Panel -->
	<aside class="lumina-right-bar">
		<h3 class="lumina-panel-title">Laser Production Settings</h3>

		<div class="lumina-form-control">
			<label>Laser Machine</label>
			<select id="lumina-machine-select" class="lumina-input-field">
				<option value="">Loading Machines...</option>
			</select>
		</div>

		<div class="lumina-form-control">
			<label>Material & Thickness</label>
			<select id="lumina-material-select" class="lumina-input-field">
				<option value="">Loading Materials...</option>
			</select>
		</div>

		<div class="lumina-form-control">
			<label>Operation Type</label>
			<select id="lumina-op-type" class="lumina-input-field">
				<option value="CUT">CUT (Vector Outline - Red Pass)</option>
				<option value="ENGRAVE">ENGRAVE (Raster Fill - Black Pass)</option>
				<option value="SCORE">SCORE (Light Line - Blue Pass)</option>
			</select>
		</div>

		<div class="lumina-info-card">
			<strong>Machine Status:</strong> <span id="bridge-indicator" class="status-off">Offline</span><br>
			<strong>Machine Bed:</strong> <span id="bed-size-display">400 x 400 mm</span>
		</div>

		<button type="button" class="lumina-btn-primary" id="btn-generate-gcode">⚡ Generate G-Code</button>

		<div id="gcode-output-panel" style="display:none;" class="lumina-download-box">
			<a id="download-gcode-link" class="lumina-btn-download" download>📥 Download G-Code File</a>
		</div>
	</aside>
</div>