@extends('layouts.app')

@section('content')
<div class="container">
	<h1>Add New Item Variations</h1>
	<form action="{{ route('item-variations.store') }}" method="POST">
		@csrf
		<div class="form-group">
			<label for="item_id">Item</label>
			<select name="item_id" class="form-control" required>
				@foreach($items as $item)
				<option value="{{ $item->id }}">{{ $item->name }}</option>
				@endforeach
			</select>
		</div>
		<div class="form-group">
			<label for="sku">Base SKU</label>
			<input type="text" name="sku" class="form-control" required>
		</div>
		<div class="form-group">
			<label for="base_price">Base Price</label> <!-- Base price for the primary variation -->
			<input type="number" name="base_price" class="form-control" required>
		</div>
		<div class="form-group">
			<label for="stock_quantity">Stock Quantity</label>
			<input type="number" name="stock_quantity" class="form-control" required>
		</div>

		<!-- Dynamically Adding Attribute Values Grouped by Attribute -->
		<div class="form-group">
			<label for="attribute_values">Select Attribute Values</label>
			@foreach($attributes as $attribute)
			<div>
				<h5>{{ $attribute->name }}</h5>
				@foreach($attribute->values as $value)
				<div class="form-inline">
					<label>{{ $value->value }}</label>
					<input type="checkbox" name="attribute_values[{{ $attribute->id }}][]" value="{{ $value->id }}">
				</div>
				@endforeach
			</div>
			@endforeach
		</div>

		<!-- Add prices for combinations dynamically based on the selection -->
		<div id="pricesContainer" class="form-group">
			<!-- Placeholder for dynamically generated price fields -->
		</div>

		<button type="submit" class="btn btn-primary">Save</button>
		<a href="{{ route('item-variations.index') }}" class="btn btn-secondary">Cancel</a>
	</form>
</div>

<script>
	// Add JavaScript to dynamically generate price fields based on attribute combinations
</script>
@endsection