@extends('layouts.app')

@section('content')
<style>
	.exception-items .form-check {
		display: inline-block;
		margin-right: 20px;
	}

	.exception-items .form-check label {
		font-size: 12px;
	}

	.item-heading {
		font-size: 16px;
		font-weight: 700;
		margin: 0;
		color: green;
	}

	.exception-items h5 {
		font-size: 16px;
		font-weight: 700;
		margin: 0;
		color: red;

	}

	#statement_div label {
		font-size: 14px;
		font-weight: 700;
		margin: 0;
	}

	.exception-items input[type="radio"] {
		font-size: 14px;
	}

	.exception-items {
		display: flex;
		align-items: center;
		gap: 20px;
	}
</style>
<div class="content production-create">
	<div class="card">
		<div class="card-body">
			<h5 class="text-center mb-4">Production Receive Voucher</h5>
			<form action="{{ route('productions.storeReceive') }}" method="POST" id="production-form" enctype="multipart/form-data">
				@csrf

				<div class="row">

					<!-- RIGHT PART FORM -->
					<div class="col-md-4">

						<!-- FROM-TO FIELD TABLE -->
						<table class="table table-borderless">
							<tbody>
								<tr>
									<th class="bg-light" width="50%"><label for="branch_from">Branch From</label></th>
									<th class="bg-light" width="50%"><label for="branch_to">Branch To</label></th>
								</tr>
								<tr>
									<td>
										<select class="form-select select2 w-100" id="branch_from" name="branch_from" required>
											<option value="">Select</option>
											@foreach ($branches as $branch)
											<option value="{{ $branch->id }}">{{ $branch->name }}</option>
											@endforeach
										</select>
									</td>
									<td>
										<select class="form-select select2 w-100" id="branch_to" name="branch_to" required>
											<option value="">Select</option>
											@foreach ($branches as $branch)
											<option value="{{ $branch->id }}">{{ $branch->name }}</option>
											@endforeach
										</select>
									</td>
								</tr>
								<tr>
									<th class="bg-light"><label for="warehouse_from">Warehouse From</label></th>
									<th class="bg-light"><label for="warehouse_to">Warehouse To</label></th>
								</tr>
								<tr>
									<td>
										<select class="form-select select2 w-100" id="warehouse_from" name="warehouse_from" required>
											<option value="">Select Branch First</option>
										</select>
									</td>
									<td>
										<select class="form-select select2 w-100" id="warehouse_to" name="warehouse_to" required>
											<option value="">Select Branch First</option>
										</select>
									</td>
								</tr>
								<tr>
									<th class="bg-light"><label for="department_from">Department From</label></th>
									<th class="bg-light"><label for="department_to">Department To</label></th>
								</tr>
								<tr>
									<td>
										<select class="form-select select2 w-100" id="department_from" name="department_from">
											<option value="">Select Warehouse First</option>
										</select>
									</td>
									<td>
										<select class="form-select select2 w-100" id="department_to" name="department_to">
											<option value="">Select Warehouse First</option>
										</select>
									</td>
								</tr>
								<tr>
									<th class="bg-light" width="50%"><label for="warehouse_from">Cost Center From</label></th>
									<th class="bg-light" width="50%"><label for="warehouse_to">Cost Center To</label></th>
								</tr>
								<tr>
									<td>
										<select class="form-select select2 w-100 @error('cost_center_from') is-invalid @enderror" id="cost_center_from" name="cost_center_from">
											<option value="">Select</option>
											@foreach ($cost_centers as $cost_center)
											<option value="{{ $cost_center->id }}">{{ $cost_center->name }}</option>
											@endforeach
										</select>
										@error('cost_center_from')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
									<td>
										<select class="form-select select2 w-100 @error('cost_center_to') is-invalid @enderror" id="cost_center_to" name="cost_center_to">
											<option value="">Select</option>
											@foreach ($cost_centers as $cost_center)
											<option value="{{ $cost_center->id }}">{{ $cost_center->name }}</option>
											@endforeach
										</select>
										@error('cost_center_to')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
								</tr>
							</tbody>
						</table>
						<!-- FROM-TO FIELD TABLE -->


						<!-- EXPENSE LEDGER AND CPM TABLE -->

						<table class="table table-bordered" style="margin-bottom: 0!important;">
							<thead>
								<tr>
									<th width="50%">Expense Ledger</th>
									<th>Amount</th>
									<th>Action</th>
								</tr>
							</thead>
							<tr>
								<td>
									<select id="expense-type-selector" class="form-control select2">
										<option value="">Select Expense Ledger</option>
										@foreach ($expenseLedgers as $ledger)
										<option value="{{ $ledger['id'] }}">{{ $ledger['name'] }}</option>
										@endforeach
									</select>
								</td>
								<td>
									<input type="number" id="expense-amount" class="form-control" placeholder="Enter Amount">
								</td>
								<td class="text-center">
									<button type="button" id="add-expense-btn" class="btn btn-success"><i class="fa fa-plus"></i></button>
								</td>
							</tr>

							<tbody id="expense-rows">
								<!-- Dynamically added rows will appear here -->
							</tbody>
							<tfoot>
								<th>
									<label for="total-expense" class="form-label"><strong>Total Expense:</strong></label>
								</th>
								<th colspan="2">
									<input type="text" id="total-expense" class="form-control" readonly value="0">
								</th>
							</tfoot>
						</table>
						<div class="text-right mb-3" style="font-size: 0.7em;">
							[ Rows: <span id="expense-row-count">0</span>,
							Columns: <span id="expense-col-count">0</span> ]
						</div>
					</div>
					<!-- EXPENSE LEDGER TABLE -->


					<!-- RIGHT PART FORM -->


					<!-- LEFT PART FORM -->
					<div class="col-md-8">

						<!-- MAIN INFO TABLE -->
						<table class="table table-borderless">
							<tbody>
								<!-- General Production Details -->
								<tr>
									<th class="bg-light" width="25%"><label for="date">Date</label></th>
									<th class="bg-light" width="25%"><label for="warehouse_from">Batch No</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 In Charge</label></th>
								</tr>
								<tr>
									<td>
										<input type="date" class="form-control @error('date') is-invalid @enderror" id="date" name="date" value="{{ old('date', date('Y-m-d')) }}" required>
										@error('date')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
									<td>
										<select class="form-select select2 w-100 @error('batch_id') is-invalid @enderror" id="batch_id" name="batch_id">
											<option value="">Select batch</option>
											@foreach ($batches as $batch)
											<option value="{{ $batch->id }}">{{ $batch->name }}</option>
											@endforeach
										</select>
										@error('batch_id')
										<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('in_charge') is-invalid @enderror" id="in_charge" name="in_charge">
											<option value="">Select In Charge</option>
											@foreach ($employees as $inCharge)
											<option value="{{ $inCharge->id }}">{{ $inCharge->name }}</option>
											@endforeach
										</select>
										@error('in_charge')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
								</tr>
								<tr>
									<th class="bg-light" width="25%"><label for="production_id">Production ID</label></th>
									<th class="bg-light" width="25%" colspan="3"><label for="consumption_id">Consumption ID</label></th>
								</tr>
								<tr>

									<td width="25%">
										<select class="form-control select2 @error('production_id') is-invalid @enderror" id="production_id" name="production_id" required>
											<option value="">Select Production</option>
											@foreach ($productions as $production)
											<option value="{{ $production['id'] }}"
												{{ in_array($production['id'], old('production_id', [])) ? 'selected' : '' }}>
												{{ $production['pro_gen_id'] }}
											</option>
											@endforeach
										</select>

										@error('production_id')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
									<td width="25%" colspan="3">
										<select class="form-control select2 @error('consumption_id') is-invalid @enderror" id="consumption_id" name="consumption_id[]" multiple>
											@foreach ($consumptions as $consumption)
											<option value="{{ $consumption['id'] }}"
												{{ in_array($consumption['id'], old('consumption_id', [])) ? 'selected' : '' }}>
												{{ $consumption['name'] }}
											</option>
											@endforeach
										</select>

										@error('consumption_id')
										<div class="invalid-feedback">{{ $message }}</div>
										@enderror
									</td>
								</tr>
							</tbody>
						</table>
						<!-- MAIN INFO TABLE -->


						<!-- ITEM SELECTION TABLE -->
						<h5 class="item-heading">Items-to-Recive:</h5>
						<table class="table table-bordered" style="margin-bottom: 0!important;">
							<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="item-selector" class="form-control select2">
										<option value="">Select Item</option>
										@foreach ($items as $item)
										<option value="{{ $item['id'] }}" data-name="{{ $item['name'] }}">{{ $item['name'] }}</option>
										@endforeach
									</select>
								</td>
								<td>
									<select id="variation-selector" class="form-control select2">
										<option value="">Select Variation</option>
										<!-- Variations dynamically updated based on selected item -->
									</select>
								</td>
								<td>
									<input type="number" id="item-quantity" class="form-control" placeholder="Enter Quantity">
								</td>
								<td>
									<input type="number" id="item-rate" class="form-control" placeholder="Enter Rate">
								</td>
								<td>
									<input type="text" id="item-amount" class="form-control" readonly value="0">
								</td>
								<td class="text-center">
									<button type="button" id="add-item-btn" class="btn btn-success"><i class="fa fa-plus"></i></button>
								</td>
							</tr>

							<tbody id="item-rows">
								<!-- Dynamically added rows will appear here -->
							</tbody>
							<tfoot>
								<th colspan="2">
									<label for="total-item-amount" class="form-label"><strong>Total:</strong></label>
								</th>
								<th>
									<input name="total_qty" type="number" id="total-quantity" class="form-control" readonly value="0.00">
								</th>
								<th>
									<input type="number" class="form-control" disabled>
								</th>
								<th colspan="2">
									<input name="total_amount" type="number" id="total-item-amount" class="form-control" readonly value="0.00">
								</th>
							</tfoot>

						</table>
						<div class="text-right" style="font-size: 0.7em;">
							[ Rows: <span id="row-count">0</span>,
							Columns: <span id="col-count">0</span> ]
						</div>
						<!-- ITEM SELECTION TABLE -->
						<hr class="my-3">



						<!-- DAMAGE/LOST/OTHER ITEM SELECTION TABLE -->
						<div class="form-group exception-items my-2">
							<h5>Item Exceptions:</h5>
							<div class="form-check">
								<input class="form-check-input" type="radio" id="damaged" name="item_condition" value="damaged" onclick="toggleStatement()">
								<label class="form-check-label" for="damaged">Damaged</label>
							</div>
							<div class="form-check">
								<input class="form-check-input" type="radio" id="lost" name="item_condition" value="lost" onclick="toggleStatement()">
								<label class="form-check-label" for="lost">Lost</label>
							</div>
							<div class="form-check">
								<input class="form-check-input" type="radio" id="other" name="item_condition" value="other" onclick="toggleStatement()">
								<label class="form-check-label" for="other">Other</label>
							</div>
						</div>


						<table class="table table-bordered" style="margin-bottom: 0!important;">
							<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="damage-item-selector" class="form-control select2">
										<option value="">Select Item</option>
										@foreach ($items as $item)
										<option value="{{ $item['id'] }}" data-name="{{ $item['name'] }}">{{ $item['name'] }}</option>
										@endforeach
									</select>
								</td>
								<td>
									<select id="damage-variation-selector" class="form-control select2">
										<option value="">Select Variation</option>
										<!-- Variations dynamically updated based on selected item -->
									</select>
								</td>
								<td>
									<input type="number" id="damage-item-quantity" class="form-control" placeholder="Enter Quantity">
								</td>
								<td>
									<input type="number" id="damage-item-rate" class="form-control" placeholder="Enter Rate">
								</td>
								<td>
									<input type="text" id="damage-item-amount" class="form-control" readonly value="0">
								</td>
								<td class="text-center">
									<button type="button" id="add-damage-item-btn" class="btn btn-danger"><i class="fa fa-plus"></i></button>
								</td>
							</tr>

							<tbody id="damage-item-rows">
								<!-- Dynamically added rows will appear here -->
							</tbody>
							<tfoot>
								<th colspan="2">
									<label for="total-damage-item-amount" class="form-label"><strong>Total:</strong></label>
								</th>
								<th>
									<input name="total_damage_qty" type="number" id="total-damage-quantity" class="form-control" readonly value="0.00">
								</th>
								<th>
									<input type="number" class="form-control" disabled>
								</th>
								<th colspan="2">
									<input name="total_damage_amount" type="number" id="total-damage-item-amount" class="form-control" readonly value="0.00">
								</th>
							</tfoot>
						</table>
						<div class="text-right" style="font-size: 0.7em;">
							[ Rows: <span id="damage-row-count">0</span>,
							Columns: <span id="damage-col-count">0</span> ]
						</div>
						<div id="statement_div" class="form-group mb-3" style="display:none;">
							<label for="statement" class="form-label">Exception Narration:</label>
							<textarea id="statement" name="statement" class="form-control"></textarea>
						</div>
						<!-- DAMAGE/LOST/OTHER ITEM SELECTION TABLE -->
					</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>
	</div>
</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() {
		let itemIndex = 0;

		const itemQuantityInput = document.getElementById('item-quantity');
		const itemRateInput = document.getElementById('item-rate');
		const itemAmountInput = document.getElementById('item-amount');

		// Real-time Calculation of Item Amount
		function updateItemAmount() {
			const quantity = parseFloat(itemQuantityInput.value) || 0;
			const rate = parseFloat(itemRateInput.value) || 0;
			const amount = quantity * rate;
			itemAmountInput.value = amount.toFixed(2); // Update the amount field
		}

		// Attach event listeners to quantity and rate inputs
		itemQuantityInput.addEventListener('input', updateItemAmount);
		itemRateInput.addEventListener('input', updateItemAmount);

		// Add Item Entry
		document.getElementById('add-item-btn').addEventListener('click', function() {
			const itemSelector = document.getElementById('item-selector');
			const variationSelector = document.getElementById('variation-selector');

			const selectedItemId = itemSelector.value;
			const selectedItemText = itemSelector.options[itemSelector.selectedIndex]?.text;
			const selectedVariation = variationSelector.value;
			const selectedVariationText = variationSelector.options[variationSelector.selectedIndex]?.text;
			const itemQuantity = parseFloat(itemQuantityInput.value);
			const itemRate = parseFloat(itemRateInput.value);
			const itemAmount = parseFloat(itemAmountInput.value);

			// Validation
			if (!selectedItemId || isNaN(itemQuantity) || itemQuantity <= 0 || isNaN(itemRate) || itemRate <= 0) {
				alert("Please select a valid item, and enter valid quantity and rate.");
				return;
			}

			const itemRows = document.getElementById('item-rows');
			const newRow = document.createElement('tr');
			newRow.classList.add('item-row');
			newRow.innerHTML = `
            <td>
                <input type="hidden" name="items[${itemIndex}][item_id]" value="${selectedItemId}">
                ${selectedItemText}
            </td>
            <td>
                <input type="hidden" name="items[${itemIndex}][variation]" value="${selectedVariation || ''}">
                ${selectedVariation && selectedVariation !== '' ? selectedVariationText : ''}
            </td>
            <td>
                <input type="hidden" name="items[${itemIndex}][quantity]" value="${itemQuantity}">
                ${itemQuantity.toFixed(2)}
            </td>
            <td>
                <input type="hidden" name="items[${itemIndex}][rate]" value="${itemRate}">
                ${itemRate.toFixed(2)}
            </td>
            <td>
                <input type="hidden" name="items[${itemIndex}][amount]" value="${itemAmount}">
                ${itemAmount.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>
        `;
			itemRows.appendChild(newRow);

			itemIndex++;
			calculateTotals();
			updateRowAndColCount(); // Update row/col count after adding the item

			// Reset the inputs
			itemSelector.value = "";
			variationSelector.innerHTML = '<option value="">Select Variation</option>';
			itemQuantityInput.value = "";
			itemRateInput.value = "";
			itemAmountInput.value = "0";
			$('.select2').trigger('change'); // Refresh Select2
		});

		// Remove Item Entry
		document.addEventListener('click', function(event) {
			if (event.target.classList.contains('remove-item-btn')) {
				event.target.closest('tr').remove();
				calculateTotals();
				updateRowAndColCount(); // Update row/col count after removing the item
			}
		});

		// Calculate Totals
		function calculateTotals() {
			let totalQuantity = 0;
			let totalAmount = 0;

			// Loop through all items to calculate totals
			document.querySelectorAll('input[name^="items"]').forEach(function(input) {
				if (input.name.endsWith("[quantity]")) {
					totalQuantity += parseFloat(input.value) || 0;
				} else if (input.name.endsWith("[amount]")) {
					totalAmount += parseFloat(input.value) || 0;
				}
			});

			// Update total quantity
			const totalQuantityElement = document.getElementById('total-quantity');
			if (totalQuantityElement.tagName === 'INPUT') {
				totalQuantityElement.value = totalQuantity.toFixed(2); // For input fields
			} else {
				totalQuantityElement.textContent = totalQuantity.toFixed(2); // For plain text
			}

			// Update total amount
			const totalAmountElement = document.getElementById('total-item-amount');
			if (totalAmountElement.tagName === 'INPUT') {
				totalAmountElement.value = totalAmount.toFixed(2); // For input fields
			} else {
				totalAmountElement.textContent = totalAmount.toFixed(2); // For plain text
			}
		}


		// Update Row and Column Count
		function updateRowAndColCount() {
			const itemRows = document.querySelectorAll('#item-rows .item-row');
			const rowCount = itemRows.length; // Count the rows

			const colCount = itemRows.length > 0 ? itemRows[0].children.length : 0; // Count columns from the first row

			// Update the footer with the row and column count
			document.getElementById('row-count').textContent = rowCount;
			document.getElementById('col-count').textContent = colCount;
		}

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

<!-- DAMAGED ITEM SELECTION AND CALCULATION -->
<script>
	function toggleStatement() {
		var lost = document.getElementById('lost').checked;
		var other = document.getElementById('other').checked;
		var statementDiv = document.getElementById('statement_div');
		if (lost || other) {
			statementDiv.style.display = 'block';
		} else {
			statementDiv.style.display = 'none';
		}
	}

	document.addEventListener('DOMContentLoaded', function() {
		let damageItemIndex = 0;

		const damageItemQuantityInput = document.getElementById('damage-item-quantity');
		const damageItemRateInput = document.getElementById('damage-item-rate');
		const damageItemAmountInput = document.getElementById('damage-item-amount');

		// Real-time Calculation of Damage Item Amount
		function updateDamageItemAmount() {
			const quantity = parseFloat(damageItemQuantityInput.value) || 0;
			const rate = parseFloat(damageItemRateInput.value) || 0;
			const amount = quantity * rate;
			damageItemAmountInput.value = amount.toFixed(2); // Update the amount field
		}

		// Attach event listeners to quantity and rate inputs
		damageItemQuantityInput.addEventListener('input', updateDamageItemAmount);
		damageItemRateInput.addEventListener('input', updateDamageItemAmount);

		// Add Damage Item Entry
		document.getElementById('add-damage-item-btn').addEventListener('click', function() {
			const damageItemSelector = document.getElementById('damage-item-selector');
			const damageVariationSelector = document.getElementById('damage-variation-selector');

			const selectedDamageItemId = damageItemSelector.value;
			const selectedDamageItemText = damageItemSelector.options[damageItemSelector.selectedIndex]?.text;
			const selectedDamageVariation = damageVariationSelector.value;
			const selectedDamageVariationText = damageVariationSelector.options[damageVariationSelector.selectedIndex]?.text;
			const damageItemQuantity = parseFloat(damageItemQuantityInput.value);
			const damageItemRate = parseFloat(damageItemRateInput.value);
			const damageItemAmount = parseFloat(damageItemAmountInput.value);

			// Validation
			if (!selectedDamageItemId || isNaN(damageItemQuantity) || damageItemQuantity <= 0 || isNaN(damageItemRate) || damageItemRate <= 0) {
				alert("Please select a valid item, and enter valid quantity and rate.");
				return;
			}

			const damageItemRows = document.getElementById('damage-item-rows');
			const newRow = document.createElement('tr');
			newRow.classList.add('damage-item-row');
			newRow.innerHTML = `
            <td>
                <input type="hidden" name="damage_items[${damageItemIndex}][item_id]" value="${selectedDamageItemId}">
                ${selectedDamageItemText}
            </td>
            <td>
                <input type="hidden" name="damage_items[${damageItemIndex}][variation]" value="${selectedDamageVariation || ''}">
                ${selectedDamageVariation && selectedDamageVariation !== '' ? selectedDamageVariationText : ''}
            </td>
            <td>
                <input type="hidden" name="damage_items[${damageItemIndex}][quantity]" value="${damageItemQuantity}">
                ${damageItemQuantity.toFixed(2)}
            </td>
            <td>
                <input type="hidden" name="damage_items[${damageItemIndex}][rate]" value="${damageItemRate}">
                ${damageItemRate.toFixed(2)}
            </td>
            <td>
                <input type="hidden" name="damage_items[${damageItemIndex}][amount]" value="${damageItemAmount}">
                ${damageItemAmount.toFixed(2)}
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger remove-damage-item-btn"><i class="fa fa-times"></i></button>
            </td>
        `;
			damageItemRows.appendChild(newRow);

			damageItemIndex++;
			calculateDamageTotals();
			updateDamageRowAndColCount(); // Update row/col count after adding the item

			// Reset the inputs
			damageItemSelector.value = "";
			damageVariationSelector.innerHTML = '<option value="">Select Variation</option>';
			damageItemQuantityInput.value = "";
			damageItemRateInput.value = "";
			damageItemAmountInput.value = "0";
			$('.select2').trigger('change'); // Refresh Select2
		});

		// Remove Damage Item Entry
		document.addEventListener('click', function(event) {
			if (event.target.classList.contains('remove-damage-item-btn')) {
				event.target.closest('tr').remove();
				calculateDamageTotals();
				updateDamageRowAndColCount(); // Update row/col count after removing the item
			}
		});

		// Calculate Damage Totals
		function calculateDamageTotals() {
			let totalDamageQuantity = 0;
			let totalDamageAmount = 0;

			// Loop through all damage items to calculate totals
			document.querySelectorAll('input[name^="damage_items"]').forEach(function(input) {
				if (input.name.endsWith("[quantity]")) {
					totalDamageQuantity += parseFloat(input.value) || 0;
				} else if (input.name.endsWith("[amount]")) {
					totalDamageAmount += parseFloat(input.value) || 0;
				}
			});

			// Update total damage quantity
			document.getElementById('total-damage-quantity').value = totalDamageQuantity.toFixed(2);

			// Update total damage amount
			document.getElementById('total-damage-item-amount').value = totalDamageAmount.toFixed(2);
		}

		// Update Damage Row and Column Count
		function updateDamageRowAndColCount() {
			const damageRows = document.querySelectorAll('#damage-item-rows .damage-item-row');
			const rowCount = damageRows.length; // Count the rows

			const colCount = damageRows.length > 0 ? damageRows[0].children.length : 0; // Count columns from the first row

			// Update the footer with the row and column count
			document.getElementById('damage-row-count').textContent = rowCount;
			document.getElementById('damage-col-count').textContent = colCount;
		}

		// Toggle Narration Box
		function toggleStatement() {
			const statementDiv = document.getElementById('statement_div');
			const selectedCondition = document.querySelector('input[name="item_condition"]:checked');

			if (selectedCondition && (selectedCondition.value === 'damaged' || selectedCondition.value === 'lost' || selectedCondition.value === 'other')) {
				statementDiv.style.display = 'block';
			} else {
				statementDiv.style.display = 'none';
			}
		}

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


<!-- EXPENSE SELECTION AND CLACULATION -->
<script>
	document.addEventListener('DOMContentLoaded', function() {
		let expenseIndex = 0;

		// Add Expense Entry
		document.getElementById('add-expense-btn').addEventListener('click', function() {
			const expenseTypeSelector = document.getElementById('expense-type-selector');
			const expenseAmountInput = document.getElementById('expense-amount');

			const selectedExpenseId = expenseTypeSelector.value;
			const selectedExpenseText = expenseTypeSelector.options[expenseTypeSelector.selectedIndex]?.text;
			const expenseAmount = parseFloat(expenseAmountInput.value);

			if (!selectedExpenseId || isNaN(expenseAmount) || expenseAmount <= 0) {
				alert("Please select a valid expense type and enter a valid amount.");
				return;
			}

			const expenseRows = document.getElementById('expense-rows');
			const newRow = document.createElement('tr');
			newRow.classList.add('expense-row');
			newRow.innerHTML = `
            <td>
                <input type="hidden" name="expenses[${expenseIndex}][type]" value="${selectedExpenseId}">
                ${selectedExpenseText}
            </td>
            <td>
                <input type="hidden" name="expenses[${expenseIndex}][amount]" value="${expenseAmount}">
                ${expenseAmount.toFixed(2)}
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger remove-expense-btn"><i class="fa fa-times"></i></button>
            </td>
        `;
			expenseRows.appendChild(newRow);

			expenseIndex++;
			calculateTotalExpense();
			updateRowAndColCount(); // Update row/col count after adding the expense

			// Reset the inputs
			expenseTypeSelector.value = ""; // Reset the dropdown
			expenseAmountInput.value = ""; // Clear the amount field
			$('.select2').trigger('change'); // Refresh the Select2 UI to reflect the reset
		});

		// Remove Expense Entry
		document.addEventListener('click', function(event) {
			if (event.target.classList.contains('remove-expense-btn')) {
				event.target.closest('tr').remove();
				calculateTotalExpense();
				updateRowAndColCount(); // Update row/col count after removing the expense
			}
		});

		// Calculate Total Expense
		function calculateTotalExpense() {
			let total = 0;

			// Calculate the total expense by summing up all amounts
			document.querySelectorAll('input[name^="expenses"][name$="[amount]"]').forEach(function(input) {
				total += parseFloat(input.value) || 0;
			});

			const totalExpenseElement = document.getElementById('total-expense');

			// Check if the target element is an input field or a plain text element
			if (totalExpenseElement.tagName === 'INPUT') {
				totalExpenseElement.value = total.toFixed(2); // Update value for input fields
			} else {
				totalExpenseElement.textContent = total.toFixed(2); // Update text for plain text elements
			}
		}


		// Update Row and Column Count
		function updateRowAndColCount() {
			const expenseRows = document.querySelectorAll('#expense-rows .expense-row');
			const rowCount = expenseRows.length; // Count the rows

			const colCount = expenseRows.length > 0 ? expenseRows[0].children.length : 0; // Count columns from the first row

			// Update the footer with the row and column count
			document.getElementById('expense-row-count').textContent = rowCount;
			document.getElementById('expense-col-count').textContent = colCount;
		}

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

<!-- BRANCH,WAREHOUSE,DEPARTMENT AJAX -->
<script>
	$(document).ready(function() {
		// Update Warehouse Dropdowns Based on Branch Selection
		$('#branch_from').on('change', function() {
			const branchId = $(this).val();
			if (branchId) {
				const url = '/productions/warehouses/' + branchId; // Update URL dynamically
				updateDropdown(url, '#warehouse_from', 'Select Warehouse');
				$('#department_from').html('<option value="">Select Warehouse First</option>'); // Reset department
			} else {
				$('#warehouse_from').html('<option value="">Select Branch First</option>'); // Reset warehouse
				$('#department_from').html('<option value="">Select Warehouse First</option>'); // Reset department
			}
		});

		$('#branch_to').on('change', function() {
			const branchId = $(this).val();
			if (branchId) {
				const url = '/productions/warehouses/' + branchId;
				updateDropdown(url, '#warehouse_to', 'Select Warehouse');
				$('#department_to').html('<option value="">Select Warehouse First</option>');
			} else {
				$('#warehouse_to').html('<option value="">Select Branch First</option>'); // Reset warehouse
				$('#department_to').html('<option value="">Select Warehouse First</option>'); // Reset department
			}
		});

		// Update Department Dropdowns Based on Warehouse Selection
		$('#warehouse_from').on('change', function() {
			const warehouseId = $(this).val();
			if (warehouseId) {
				const url = '/productions/departments/' + warehouseId;
				updateDropdown(url, '#department_from', 'Select Department');
			} else {
				$('#department_from').html('<option value="">Select Warehouse First</option>'); // Reset department
			}
		});

		$('#warehouse_to').on('change', function() {
			const warehouseId = $(this).val();
			if (warehouseId) {
				const url = '/productions/departments/' + warehouseId;
				updateDropdown(url, '#department_to', 'Select Department');
			} else {
				$('#department_to').html('<option value="">Select Warehouse First</option>'); // Reset department
			}
		});

		// Function to Update Dropdown Options Dynamically
		function updateDropdown(url, targetSelector, placeholder) {
			if (url && targetSelector) {
				$.ajax({
					url: url,
					type: 'GET',
					dataType: 'json',
					beforeSend: function() {
						$(targetSelector).html('<option value="">Loading...</option>'); // Show loading indicator
					},
					success: function(data) {
						const dropdown = $(targetSelector);
						dropdown.empty();
						dropdown.append(`<option value="">${placeholder}</option>`); // Add placeholder
						$.each(data, function(index, item) {
							dropdown.append(`<option value="${item.id}">${item.name}</option>`);
						});
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.error('Error loading data:', textStatus, errorThrown); // Log error details
						$(targetSelector).html('<option value="">Error Loading Data</option>'); // Handle error
					}
				});
			}
		}
	});
</script>
<!-- BRANCH,WAREHOUSE,DEPARTMENT AJAX -->



<!-- Dynamically Hidden Production Related Fields -->
<!-- <script>
	$(document).ready(function() {
		// Function to handle showing/hiding production fields and managing required attributes
		function toggleProductionFields() {
			const selectedValue = $('#voucher_type').val();
			if (selectedValue === 'yes') {
				$('.production_fields').show();
				$('#production_status').attr('required', true).prop('disabled', false);
			} else {
				$('.production_fields').hide();
				$('#production_status').removeAttr('required').prop('disabled', true);
			}
		}

		// Attach the change event to the select element
		$('#voucher_type').on('change', function() {
			toggleProductionFields();
		});

		// Call the function on page load to handle pre-selected value
		toggleProductionFields();
	});
</script> -->

@endsection