@extends('layouts.app')

@section('content')
<div class="content production-create">
	<div class="card">
		<div class="card-body">
			<h5 class="text-center mb-4">Create Productions</h5>
			<form action="{{ route('productions.store') }}" method="POST" id="production-form" enctype="multipart/form-data">
				@csrf


				<!-- MAIN INFO TABLE -->
				<table class="table table-borderless">
					<tbody>
						<!-- General Production Details -->
						<tr>
							<th class="bg-light" width="25%"><label for="date">Start Date</label></th>
							<th class="bg-light" width="25%"><label for="warehouse_from">End Date</label></th>
							<th class="bg-light" width="25%"><label for="ref_no">Reference No</label></th>
							<th class="bg-light" width="25%"><label for="in_charge">Production Status</label></th>
						</tr>
						<tr>
							<td>
								<input type="date" class="form-control @error('start_date') is-invalid @enderror" id="start_date" name="start_date" value="{{ old('start_date', date('Y-m-d')) }}" required>
								@error('start_date')
								<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</td>
							<td>
								<input type="date" class="form-control @error('end_date') is-invalid @enderror" id="end_date" name="end_date" value="{{ old('end_date', date('Y-m-d')) }}" required>
								@error('end_date')
								<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</td>
							<td>
								<input type="text" class="form-control @error('ref_no') is-invalid @enderror" id="ref_no" name="ref_no" value="{{ old('ref_no') }}" placeholder="Reference No">
								@error('ref_no')
								<div class="invalid-feedback">{{ $message }}</div>
								@enderror
							</td>
							<td>
								<select class="form-select select2 w-100 @error('status') is-invalid @enderror" id="status" name="status" required>
									<option value="">Select</option>
									<option value="planned">Planned</option>
									<option value="in_process">In Process</option>
									<option value="completed">Complete</option>
									<option value="canceled">Canceled</option>
									@error('status')
									<div class="invalid-feedback">{{ $message }}</div>
									@enderror
							</td>
						</tr>
					</tbody>
				</table>
				<!-- MAIN INFO TABLE -->
				<div class="row">
					<!-- ISSUE ITEMS -->
					<div class="col-md-6">
						<h5 class="mt-4">Issue Items</h5>
						<table class="table table-bordered" id="issue-items-table">
							<thead>
								<tr>
									<th width="30%">Item</th>
									<th width="20%">Variation</th>
									<th width="15%">Quantity</th>
									<th width="15%">Cost Rate</th>
									<th width="15%">Amount</th>
									<th width="5%">Action</th>
								</tr>
							</thead>
							<tr>
								<td>
									<select id="issue-item-selector" class="form-control select2">
										<option value="">Select Item</option>
										@foreach ($items as $item)
										<option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
										@endforeach
									</select>
								</td>
								<td>
									<select id="issue-variation-selector" class="form-control select2">
										<option value="">Select Variation</option>
									</select>
								</td>
								<td>
									<input type="number" id="issue-quantity" class="form-control" placeholder="Enter Quantity">
								</td>
								<td>
									<input type="number" id="issue-rate" class="form-control" placeholder="Enter Rate">
								</td>
								<td>
									<input type="text" id="issue-amount" class="form-control" readonly value="0">
								</td>
								<td class="text-center">
									<button type="button" id="add-issue-item-btn" class="btn btn-success"><i class="fa fa-plus"></i></button>
								</td>
							</tr>
							<tbody id="issue-item-rows">
								<!-- Rows dynamically added -->
							</tbody>
							<tfoot>
								<tr>
									<th colspan="2"><strong>Total:</strong></th>
									<th><input type="number" id="issue-total-quantity" class="form-control" readonly value="0.00"></th>
									<th></th>
									<th><input type="number" id="issue-total-amount" class="form-control" readonly value="0.00"></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</div>

					<!-- RECEIVE ITEMS -->
					<div class="col-md-6">
						<h5 class="mt-4">Receive Items</h5>
						<table class="table table-bordered" id="receive-items-table">
							<thead>
								<tr>
									<th width="30%">Item</th>
									<th width="20%">Variation</th>
									<th width="15%">Quantity</th>
									<th width="15%">Cost Rate</th>
									<th width="15%">Amount</th>
									<th width="5%">Action</th>
								</tr>
							</thead>
							<tr>
								<td>
									<select id="receive-item-selector" class="form-control select2">
										<option value="">Select Item</option>
										@foreach ($items as $item)
										<option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
										@endforeach
									</select>
								</td>
								<td>
									<select id="receive-variation-selector" class="form-control select2">
										<option value="">Select Variation</option>
									</select>
								</td>
								<td>
									<input type="number" id="receive-quantity" class="form-control" placeholder="Enter Quantity">
								</td>
								<td>
									<input type="number" id="receive-rate" class="form-control" placeholder="Enter Rate">
								</td>
								<td>
									<input type="text" id="receive-amount" class="form-control" readonly value="0">
								</td>
								<td class="text-center">
									<button type="button" id="add-receive-item-btn" class="btn btn-success"><i class="fa fa-plus"></i></button>
								</td>
							</tr>
							<tbody id="receive-item-rows">
								<!-- Rows dynamically added -->
							</tbody>
							<tfoot>
								<tr>
									<th colspan="2"><strong>Total:</strong></th>
									<th><input type="number" id="receive-total-quantity" class="form-control" readonly value="0.00"></th>
									<th></th>
									<th><input type="number" id="receive-total-amount" class="form-control" readonly value="0.00"></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
		</div>
		<!-- LEFT PART FORM -->
	</div>


	<!-- IMAGE AND NARRATION FIELDS TABLE -->
	<table class="table table-borderless">
		<tbody>
			<tr>
				<th colspan="2" class="bg-light" width="16.66%"><label for="product_image">REF Image</label></th>
				<th colspan="2" class="bg-light" width="16.66%"><label for="product_image">REF Image URL</label></th>
				<th colspan="4" class="bg-light" width="16.66%"><label for="product_image">Narration</label></th>
			</tr>
			<tr>
				<td colspan="2">
					<div class="row py-2" style="align-items: center;">
						<div class="col-md-8">
							<input type="file" class="@error('product_image') is-invalid @enderror" id="product_image" name="product_image" accept="image/*" onchange="previewImage(event)">
						</div>
						<div class="col-md-4">
							<img id="image_preview" src="" alt="Image Preview" style="max-width: 48px; display: none; float:right">
						</div>
					</div>
					@error('product_image')
					<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</td>
				<td colspan="2">
					<input type="text" class="form-control @error('ref_image_url') is-invalid @enderror" id="ref_image_url" name="ref_image_url" placeholder="Reference Image URL">
					@error('ref_image_url')
					<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</td>
				<td width="25%" colspan="2">
					<textarea class="form-control @error('narration') is-invalid @enderror"
						id="narration"
						name="narration"
						rows="2" placeholder="Narration"></textarea>
					@error('narration')
					<div class="invalid-feedback">{{ $message }}</div>
					@enderror
				</td>
			</tr>
		</tbody>
	</table>
	<!-- IMAGE AND CALCULATION FIELDS TABLE -->


	<!-- Submit Button -->
	<button type="submit" class="btn btn-primary my-3" style="float: right;">Save</button>
	</form>
</div>


<!-- IMAGE PREVIEW SCRIPT -->
<script>
	function previewImage(event) {
		const input = event.target;
		const preview = document.getElementById('image_preview');

		if (input.files && input.files[0]) {
			const reader = new FileReader();
			reader.onload = function(e) {
				preview.src = e.target.result; // Set the src of the img tag
				preview.style.display = 'block'; // Show the img tag
			}
			reader.readAsDataURL(input.files[0]); // Read the file as a data URL
		}
	}
</script>
<!-- IMAGE PREVIEW SCRIPT -->

<!-- ITEM SELECTION AND CALCULATION -->
<script>
	document.addEventListener('DOMContentLoaded', function() {
		function setupSection(prefix) {
			let itemIndex = 0;

			const itemSelector = document.getElementById(`${prefix}-item-selector`);
			const variationSelector = document.getElementById(`${prefix}-variation-selector`);
			const quantityInput = document.getElementById(`${prefix}-quantity`);
			const rateInput = document.getElementById(`${prefix}-rate`);
			const amountInput = document.getElementById(`${prefix}-amount`);
			const addItemButton = document.getElementById(`add-${prefix}-item-btn`);
			const itemRows = document.getElementById(`${prefix}-item-rows`);
			const totalQuantityInput = document.getElementById(`${prefix}-total-quantity`);
			const totalAmountInput = document.getElementById(`${prefix}-total-amount`);

			function updateItemAmount() {
				const quantity = parseFloat(quantityInput.value) || 0;
				const rate = parseFloat(rateInput.value) || 0;
				const amount = quantity * rate;
				amountInput.value = amount.toFixed(2);
			}

			quantityInput.addEventListener('input', updateItemAmount);
			rateInput.addEventListener('input', updateItemAmount);

			addItemButton.addEventListener('click', function() {
				const selectedItemId = itemSelector.value;
				const selectedItemText = itemSelector.options[itemSelector.selectedIndex]?.text || '';
				const selectedVariationId = variationSelector.value;
				const selectedVariationText = variationSelector.options[variationSelector.selectedIndex]?.text || '';
				const quantity = parseFloat(quantityInput.value);
				const rate = parseFloat(rateInput.value);
				const amount = parseFloat(amountInput.value);

				if (!selectedItemId || isNaN(quantity) || quantity <= 0 || isNaN(rate) || rate <= 0) {
					alert('Please enter valid data.');
					return;
				}

				const row = document.createElement('tr');
				row.innerHTML = `
                <td>${selectedItemText}</td>
                <td>${selectedVariationText}</td>
                <td>${quantity.toFixed(2)}</td>
                <td>${rate.toFixed(2)}</td>
                <td>${amount.toFixed(2)}</td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger remove-item-btn"><i class="fa fa-times"></i></button>
                </td>
                <input type="hidden" name="${prefix}_items[${itemIndex}][item_id]" value="${selectedItemId}">
                <input type="hidden" name="${prefix}_items[${itemIndex}][variation_id]" value="${selectedVariationId}">
                <input type="hidden" name="${prefix}_items[${itemIndex}][quantity]" value="${quantity.toFixed(2)}">
                <input type="hidden" name="${prefix}_items[${itemIndex}][rate]" value="${rate.toFixed(2)}">
                <input type="hidden" name="${prefix}_items[${itemIndex}][amount]" value="${amount.toFixed(2)}">
            `;
				itemRows.appendChild(row);

				row.querySelector('.remove-item-btn').addEventListener('click', function() {
					row.remove();
					calculateTotals();
				});

				itemIndex++;
				calculateTotals();

				// Reset fields
				itemSelector.value = '';
				variationSelector.innerHTML = '<option value="">Select Variation</option>';
				quantityInput.value = '';
				rateInput.value = '';
				amountInput.value = '0';
				$('.select2').trigger('change');
			});

			function calculateTotals() {
				let totalQuantity = 0;
				let totalAmount = 0;

				itemRows.querySelectorAll('tr').forEach(function(row) {
					const cells = row.children;
					totalQuantity += parseFloat(cells[2].textContent) || 0;
					totalAmount += parseFloat(cells[4].textContent) || 0;
				});

				totalQuantityInput.value = totalQuantity.toFixed(2);
				totalAmountInput.value = totalAmount.toFixed(2);
			}
		}

		// Initialize both sections
		setupSection('issue');
		setupSection('receive');

		// Initialize Select2
		$('.select2').select2();
	});
</script>
<!-- ITEM SELECTION AND CALCULATION -->


@endsection