@extends('layouts.app')
@section('title', __('lang_v1.add_opening_stock'))
<style>
	.tags, #tags {
		margin-bottom: 10px;
	}

	.tags .tag, #tags .tag {
		display: inline-block;
		margin-right: 10px;
		padding: 5px 9px;
		font-size: 14px;
		background: #ddd;
		border-radius: 4px;
		margin-bottom: 5px;
	}

	.tags .tag span, #tags .tag span {
		margin-right: 20px;
		display: inline;
	}

	.tags .tag .remove-button, #tags .tag .remove-button {
		display: inline;
		cursor: pointer;
	}
</style>
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.add_opening_stock')</h1>
</section>

<!-- Main content -->
<section class="content">
	{!! Form::open(['url' => action([\App\Http\Controllers\OpeningStockController::class, 'save']), 'method' => 'post', 'id' => 'add_opening_stock_form' ]) !!}
	{!! Form::hidden('product_id', $product->id); !!}
	@include('opening_stock.form-part')
	<div class="row">
		<div class="col-sm-12 text-center">
			<button type="submit" class="btn btn-primary btn-big">@lang('messages.save')</button>
		</div>
	</div>

	{!! Form::close() !!}




	

	<div class="modal fade serial_modal" id="purchases_serial_numberModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 50%;" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Edit Serial Number</h5>
				</div>
				<div class="modal-body">
					<!-- Auto Generate Section -->
					<div class="panel panel-default" style="margin-bottom: 15px;">
						<div class="panel-heading" style="padding: 8px 12px;">
							<strong><i class="fa fa-magic"></i> Auto Generate Serial Numbers</strong>
						</div>
						<div class="panel-body" style="padding: 12px;">
							<div class="row">
								<div class="col-md-5">
									<div class="form-group" style="margin-bottom: 0;">
										<label for="auto_serial_start">First Serial Number</label>
										<input type="text" id="auto_serial_start" class="form-control input-sm" placeholder="e.g., 000111">
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group" style="margin-bottom: 0;">
										<label for="auto_serial_qty">Quantity</label>
										<input type="number" id="auto_serial_qty" class="form-control input-sm" placeholder="e.g., 200" min="1" max="10000">
									</div>
								</div>
								<div class="col-md-3">
									<div class="form-group" style="margin-bottom: 0;">
										<label>&nbsp;</label>
										<button type="button" id="btn_auto_generate_serial" class="btn btn-success btn-sm btn-block">
											<i class="fa fa-cogs"></i> Generate
										</button>
									</div>
								</div>
							</div>
							<small class="text-muted">Enter the first serial number and quantity to auto-generate sequential serial numbers.</small>
						</div>
					</div>
					<!-- End Auto Generate Section -->

					<hr style="margin: 10px 0;">
					<label>Manual Entry (Press Enter or comma to add)</label>
					<input value="" id="purchases_serial_number" class="purchases_serial_numberclass form-control input-sm" type="text" class="form-control" placeholder="Enter serial number manually">
					
					<div class="tags_list" style="margin-top: 15px;">
						<label>Added Serial Numbers: <span id="serial_count_display" class="badge">0</span></label>
						<div id="tags" class="tags" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 4px; background: #f9f9f9;">
							<!-- tag list -->
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id="btn_clear_all_serials" class="btn btn-danger btn-sm pull-left">
						<i class="fa fa-trash"></i> Clear All
					</button>
					<button type="button" id="modelReload" class="btn btn-primary" data-dismiss="modal">Save</button>
				</div>
			</div>
		</div>
	</div>

</section>
@stop


@section('javascript')


	<script src="{{ asset('js/opening_stock.js?v=' . $asset_v) }}"></script>
	<script type="text/javascript">


		$(document).ready( function(){


		// 
			const selectElement = document.getElementById("purchases_serial_number");
			const tagsContainer = document.getElementById("tags");
			let tags = [];

			// Function to update serial count display
			function updateSerialCountDisplay() {
				$('#serial_count_display').text(tags.length);
			}

			// Function to generate sequential serial numbers preserving leading zeros
			function generateSequentialSerials(startSerial, quantity) {
				var serials = [];
				
				// Extract numeric part and prefix (if any non-numeric characters at the start)
				var match = startSerial.match(/^(.*?)(\d+)$/);
				
				if (!match) {
					alert('Invalid serial number format. Please enter a serial number ending with digits.');
					return [];
				}
				
				var prefix = match[1]; // Any non-numeric prefix
				var numericPart = match[2]; // The numeric part
				var numLength = numericPart.length; // Length to preserve leading zeros
				var startNum = parseInt(numericPart, 10);
				
				for (var i = 0; i < quantity; i++) {
					var currentNum = startNum + i;
					var paddedNum = String(currentNum).padStart(numLength, '0');
					serials.push(prefix + paddedNum);
				}
				
				return serials;
			}

			// ---------------------------------------------------------------------------------
			$(document).on('click', '.purchases_serial_numberModelButton', function (params) {

				// Set ID For Input Id
				var inputfindid = this.value;
				const key = 'inputfindid';
				localStorage.setItem(key, inputfindid);

				// Set ID For Value Set
				var valueSetId = this.getAttribute('data-value');
				const key1 = 'valueSetId';
				localStorage.setItem(key1, valueSetId);

				// Clear auto-generate inputs
				$('#auto_serial_start').val('');
				$('#auto_serial_qty').val('');

				// Get Previous value
				var previousValue = document.getElementById(valueSetId).value;
				var previousValueArry = previousValue.split(",");
				var previousValueArryLength = previousValueArry.length;
				if (previousValue === "") {
					// tags = [];
				}else{
					for (var i = 0; i < previousValueArry.length; i++) {
						$("#tags").append(
							"<div class='tag'><span>" + previousValueArry[i] + "</span><div class='remove-button'>x</div></div>"
						);
						tags.push(previousValueArry[i]);
					}
				}

				updateSerialCountDisplay();
			})

			// Auto Generate Serial Numbers Button Click Handler
			$(document).on('click', '#btn_auto_generate_serial', function() {
				var startSerial = $('#auto_serial_start').val().trim();
				var quantity = parseInt($('#auto_serial_qty').val());
				
				if (!startSerial) {
					alert('Please enter the first serial number.');
					$('#auto_serial_start').focus();
					return;
				}
				
				if (!quantity || quantity < 1) {
					alert('Please enter a valid quantity (minimum 1).');
					$('#auto_serial_qty').focus();
					return;
				}
				
				if (quantity > 10000) {
					alert('Maximum quantity allowed is 10,000. Please enter a smaller quantity.');
					$('#auto_serial_qty').focus();
					return;
				}
				
				var generatedSerials = generateSequentialSerials(startSerial, quantity);
				
				if (generatedSerials.length === 0) {
					return;
				}
				
				var duplicates = [];
				var newSerials = [];
				
				// Check for duplicates in current tags
				generatedSerials.forEach(function(serial) {
					if (tags.includes(serial)) {
						duplicates.push(serial);
					} else {
						newSerials.push(serial);
					}
				});
				
				if (duplicates.length > 0 && duplicates.length === generatedSerials.length) {
					alert('All generated serial numbers already exist in the list.');
					return;
				}
				
				// Add new serials (batch add for better performance)
				var addedCount = 0;
				newSerials.forEach(function(serial) {
					tags.push(serial);
					addedCount++;
				});
				
				// Update hidden input
				var getValueSetId = localStorage.getItem('valueSetId');
				document.getElementById(getValueSetId).value = tags;
				
				// Update quantity
				var getInputFindId = localStorage.getItem('inputfindid');
				var input = $("#" + getInputFindId + "").find('input');
				var currentQty = __read_number(input);
				__write_number(input, currentQty + addedCount);
				input.change();
				
				// Render all tags
				renderTags();
				updateSerialCountDisplay();
				
				// Clear auto-generate inputs
				$('#auto_serial_start').val('');
				$('#auto_serial_qty').val('');
				
				// Show success message
				if (duplicates.length > 0) {
					alert('Added ' + addedCount + ' serial numbers. ' + duplicates.length + ' duplicates were skipped.');
				} else {
					alert('Successfully generated and added ' + addedCount + ' serial numbers.');
				}
			});

			// Clear All Serials Button
			$(document).on('click', '#btn_clear_all_serials', function() {
				if (tags.length === 0) {
					alert('No serial numbers to clear.');
					return;
				}
				
				if (confirm('Are you sure you want to clear all ' + tags.length + ' serial numbers?')) {
					var removedCount = tags.length;
					
					// Update quantity
					var getInputFindId = localStorage.getItem('inputfindid');
					var input = $("#" + getInputFindId + "").find('input');
					var currentQty = __read_number(input);
					__write_number(input, Math.max(0, currentQty - removedCount));
					input.change();
					
					// Clear tags
					tags = [];
					var getValueSetId = localStorage.getItem('valueSetId');
					document.getElementById(getValueSetId).value = '';
					
					renderTags();
					updateSerialCountDisplay();
				}
			});

			let lastSelectedValue;


			selectElement.addEventListener("keyup", (event) => {
				if (event.key === "Enter" || event.key === ",") {


					// var getProductSetId = localStorage.getItem('productSetId');
					// var getvariationidSetId = localStorage.getItem('variationidSetId');
					// var location_id = $('select#location_id').find(':selected').val();


					const value = selectElement.value.trim().replace(',', '');
					if (value) {

						if (tags.includes(value) || value == "") {
							
						} else {
							// $.ajax({
							// 	url: '/serial/check_serial',
							// 	type: 'POST',
							// 	dataType: 'html',
							// 	data: {
							// 		serial_number: value,
							// 		product_id: getProductSetId,
							// 		location_id: location_id,
							// 		variation_id: getvariationidSetId
							// 	},
							// 	success: function (result) {
							// 		if (result == "0") {
									addTag(value);
									countUpFunction(value);
									updateSerialCountDisplay();
							// 			} else {
							// 				alert("This Serial Number Already Added");
							// 			}
							// 		},
							// 	});
						}
						selectElement.value = "";
					}
				}
			});



			function renderTags() {
				tagsContainer.innerHTML = "";
				tags.forEach((value) => {
					const tagElement = document.createElement("div");
					tagElement.classList.add("tag");
					tagElement.innerHTML = `<span>${value}</span><div class="remove-button">x</div>`;
					tagElement
					.querySelector(".remove-button")
					.addEventListener("click", function () {
						// removeTag(value);
						// renderTags();
					});
					tagsContainer.appendChild(tagElement);
				});
			}

			function addTag(value) {
				tags.push(value);

				var getValueSetId = localStorage.getItem('valueSetId');

				document.getElementById(getValueSetId).value = tags;

				renderTags();
			}


			function removeTag(value) {
				const index = tags.indexOf(value);
				if (index >= 0) {
					tags.splice(index, 1);
				}

				var getValueSetId = localStorage.getItem('valueSetId');

				document.getElementById(getValueSetId).value = tags;

				renderTags();
				updateSerialCountDisplay();
			}


			$(document).on("click", '.remove-button', function () {
				if (event.target.className === "remove-button") {
					var tag = event.target.closest(".tag");
					var spanTag = tag.querySelector("span");
					var value = spanTag.innerHTML;
					removeTag(value);
					countDownFunction(value);
				}
			});


			// 
			function countUpFunction(lastSelectedValue) {

				count = 1;

				var getInputFindId = localStorage.getItem('inputfindid');
				var input = $("#" + getInputFindId + "").find('input');
				var qty = __read_number(input);
				if (qty >= 0) {
					__write_number(input, qty + count);
					input.change();
				}

			}
			// Count Up


			// Count Down
			function countDownFunction(unselectedValue) {
				count = 1;
				var getInputFindId = localStorage.getItem('inputfindid');

				var input = $("#" + getInputFindId + "")
					.find('input');
				var qty = __read_number(input);

				if (qty > 0) {
					__write_number(input, qty - count);
					input.change();
				}
			}



			// modelReload
			$(document).on('click', '#modelReload', function () {
				tags = []
				$(".tag").remove();
				updateSerialCountDisplay();
			});
			$(document).on('hidden.bs.modal', '.serial_modal', function (e) {
                tags = []
				$(".tag").remove();
				updateSerialCountDisplay();
            });

			$('#product_serial_numberP').select2();

			// ---------------------------------------------------------------------------




			$('.os_date').datetimepicker({
		        format: moment_date_format + ' ' + moment_time_format,
		        ignoreReadonly: true,
		        widgetPositioning: {
		            horizontal: 'right',
		            vertical: 'bottom'
		        }
		    });





		});
	</script>
@endsection