@include('layouts.header')
		<!-- /Header -->
		@include('layouts.sidebar')
<style>
			.form-check-input{
				height: 15px!important;
				width: 15px!important;
			}
		</style>
		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>Edit Supplier</h4>
							
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('suppliers')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Supplier</a>
							</div>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>
					
				</div>
				<!-- @if(session()->has('success'))
							<div class="alert alert-success">
								{{ session()->get('success') }}
							</div>
							@endif
							@if(session()->has('error'))
							<div class="alert alert-danger">
								{{ session()->get('error') }}
							</div>
						    @endif -->
				<!-- /add -->
				<form action="{{ route('update_supplier')}}" method="post" id="myForm">
					@csrf
                    <input type="hidden" name="id" value="{{$data->id}}">
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"  aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Supplier Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										
										<div class="row">
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Supplier ID</label>
													<input type="text" name="supplier_id" class="form-control" value="{{$data->supplier_id}}">
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Supplier Name</label>
													<input type="text" name="supplier_name" class="form-control" value="{{$data->supplier_name}}">
												</div>
											</div>	
											@php
											    // Decode the JSON string into an array
											    $selectedWarehouses = explode(',', $data->warehouse_id);
											@endphp

											<div class="col-lg-4 col-sm-6 col-12">
											    <div class="mb-3 add-product">
											        <label class="form-label">Warehouse</label>
											        <select class="select" name="warehouse_id[]" multiple required>
											            <option value="">Choose</option>
											            @foreach($warehouses as $row)
											                <option value="{{ $row->id }}" 
											                    {{ in_array($row->id, $selectedWarehouses ?? []) ? 'selected' : '' }}>
											                    {{ $row->warehouse_name }}
											                </option>
											            @endforeach
											        </select>
											    </div>
											</div>

                                            <div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Contact Person</label>
													<input type="text" name="contact_person" class="form-control" value="{{$data->contact_person}}">
												</div>
											</div>
											<div class="col-lg-3 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Top</label>
													<select class="form-select" name="top" required id="top">
														<option value="">Select</option>
														<option value="oms" {{ $data->top == 'oms' ? 'selected' : '' }}>OMS</option>
														<option value="ms" {{ $data->top == 'ms' ? 'selected' : '' }}>MS</option>
													</select>
					
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">GST</label>
													<div class="d-flex align-items-center">
														<div class="form-check me-4">
															<input type="radio" name="gst" id="gst-yes" value="Yes" class="form-check-input" {{ $data->gst == 'Yes' ? 'checked' : '' }}>
															<label for="gst-yes" class="form-check-label">Yes</label>
														</div>
														<div class="form-check">
															<input type="radio" name="gst" id="gst-no" value="No" class="form-check-input" {{ $data->gst == 'No' ? 'checked' : '' }}>
															<label for="gst-no" class="form-check-label">No</label>
														</div>
													</div>
												</div>
											</div>
											<div class="col-lg-3 col-sm-6 col-12" id="gst_no_sec" style="display: {{ $data->gst == 'Yes' ? 'block' : 'none' }}">
												<div class="mb-3 add-product">
													<label class="form-label">GST No</label>
													<!-- <input type="text" name="gst_no" class="form-control" placeholder="Enter GST No" id="myTextbox" > -->
												<input type="text" style="text-transform: uppercase;"  value="{{$data->gst_number}}" name="gst_no" class="form-control" id="gst_no"  placeholder="Enter GST No" maxlength="15"  oninput="validateGST(this)">
												 <small id="gst-error" style="color:red; display:none;">Invalid GSTIN format</small>
												</div>
											</div>
											<div class="col-lg-3 col-sm-6 col-12" id="msme" style="display: {{ $data->gst == 'Yes' ? 'block' : 'none' }}">
												<div class="mb-3 add-product">
													<label class="form-label">MSME</label>
													<input type="text" name="msme" id="msme_number" value="{{$data->msme}}" class="form-control" oninput="this.value = this.value.toUpperCase().replace(/[^A-Z0-9-]/g,'')" placeholder="Enter MSME" style="text-transform: uppercase;">
												<small id="msme-error" class="text-danger"></small>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-lg-2 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label class="form-label">Telephone code</label>
													<input type="text" class="form-control list" name="code"  value="{{$data->code}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</div>
											</div>
											
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Phone1</label>
													<input type="text" name="phone1" class="form-control" value="{{$data->phone1}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label class="form-label">Phone2</label>
													<input type="text" name="phone2" class="form-control list" value="{{$data->phone2}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</div>
											</div>
											
										</div>

                                        <div class="row">
                                            <div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Mobile No</label>
													<input type="text" name="mobile_no" class="form-control list" value="{{$data->mobile}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">

												</div>
											</div>
                                            <div class="col-lg-6 col-sm-6 col-12">
												<input type="hidden" name="fax" value="">
												<div class="mb-3 add-product">
													<label class="form-label">Email</label>
													<input type="email" name="email" class="form-control list" value="{{$data->email}}">
													<!-- <label class="form-label">Fax No</label>
													<input type="text" name="fax" class="form-control list" value="{{$data->fax}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57"> -->

												</div>
											</div>
                                        </div>
                                        <!-- Editor -->
                                        <div class="col-lg-12">
                                            <div class="input-blocks summer-description-box transfer mb-3">
                                                <label>Address</label>
                                                <textarea class="form-control h-100" rows="5" name="address" >{{$data->address}}</textarea>
                                                
                                            </div>
                                        </div>
                                        <!-- /Editor -->

										<div class="row">
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">City</label>
													<input type="text" name="city" class="form-control" value="{{$data->city}}">
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label>State</label>
													<input type="text" name="state" class="form-control list" value="{{$data->state}}">
													
												</div>
											</div>
											
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label>PIN Code</label>
													<input type="text" name="pincode" class="form-control list" value="{{$data->pincode}}" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</div>
											</div>
											
										</div>

										
									</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<a href="{{ url('suppliers')}}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" class="btn btn-submit" id="submitBtn">Update Supplier</button>
						</div>
					</div>
				</form>
			<!-- /add -->

		</div>
	</div>
	</div>
	<!-- /Main Wrapper -->
	 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

	<script>
		$(document).ready(function() {
			$('#myForm').on('submit', function(e) {
				e.preventDefault();
				let form = this;
				let formData = new FormData(form); 
				$('#global-loader').show();
				$.ajax({
					url: form.action,
					method: form.method,
					data: formData,
					processData: false,
					contentType: false,
					success: function(response) {
						$('#global-loader').hide();
						successMessage("Supplier Updated Successfully.","{{ route('suppliers') }}");
					},
					error: function(xhr) {
						$('#global-loader').hide();
						errorMessage();
					}
				});
			});
    });	</script>
    <script>

document.getElementById("gst_no").addEventListener("input", function() {
	this.value = this.value.replace(/[^A-Z0-9-]/g,'').toUpperCase();
    if (this.value.length > 15) {
        alert("GST No length is 15.");
        this.value = this.value.substring(0, 15);
       
    }
});
document.getElementById("gst_no").addEventListener("blur", function() {
    if (this.value.length !== 15) {
        if (!this.dataset.alertShown) { 
            alert("GST number must be exactly 15 characters.");
            this.dataset.alertShown = "true"; 
        }
        this.focus();
    } else {
        this.dataset.alertShown = ""; 
    }
});
$('input[name="gst"]').on('change', function () {
		if ($(this).val() === 'Yes') {
			$('#gst_no_sec').show(); 
			$('#msme').show(); 
			$("#gst_no").attr('required', true);
			$("#msme_number").attr('required', true);
		} else {
			$('#gst_no_sec').hide(); 
			$('#msme').hide(); 
			$("#gst_no").attr('required', false);
			$("#msme_number").attr('required', false);
		}
	});
document.addEventListener("DOMContentLoaded", function () {
    const textbox = document.getElementById("myTextbox");
    if (textbox) {
        textbox.addEventListener("input", function () {
            this.dataset.alertShown = "";
        });
    } else {
        console.error("Element with ID 'myTextbox' not found!");
    }
});


</script>

<!-- <script>
	function validateGST(input) {
		// Allow only numbers and uppercase letters
		input.value = input.value.toUpperCase().replace(/[^0-9A-Z]/g, '');

		const gstRegex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[0-9]{1}[A-Z]{2}$/;
		const gstValue = input.value;

		if (gstValue.length < 15) {
			if (gstValue.length > 0) {
				document.getElementById("gst-error").style.display = "block";
				document.getElementById("gst-error").textContent = "GSTIN must be 15 characters.";
				input.style.borderColor = "red";
			} else {
				document.getElementById("gst-error").style.display = "none";
				input.style.borderColor = "";
			}
			return;
		}

		if (gstRegex.test(gstValue)) {
			// Valid GST
			document.getElementById("gst-error").style.display = "none";
			input.style.borderColor = "#28a745";
		} else {
			// Invalid GST
			document.getElementById("gst-error").style.display = "block";
			input.style.borderColor = "red";
			input.value = ""; // Clear input

			// Force focus back
			setTimeout(() => {
				input.focus();
			}, 0);
		}
	}

</script> -->

<script>
	function validateGST(input) {
		input.value = input.value.toUpperCase().replace(/[^0-9A-Z]/g, '');

		const gstRegex = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[0-9]{1}[A-Z]{2}$/;
		const gstValue = input.value;

		const errorBox = document.getElementById("gst-error");

		if (gstValue.length <= 15) {
			if (gstValue.length < 15) {
				errorBox.style.display = "block";
				errorBox.textContent = "GSTIN must be 15 characters.";
				input.style.borderColor = "red";
			} else {
				errorBox.style.display = "none";
				input.style.borderColor = "";
			}
			return;
		}

		if (gstRegex.test(gstValue)) {
			// Call backend to check for duplicates
			fetch(`/check-gst-exists-supplier/${gstValue}`)
				.then(response => response.json())
				.then(data => {
					if (data.exists) {
						errorBox.style.display = "block";
						errorBox.textContent = "This GSTIN is already in use.";
						input.style.borderColor = "red";

						// Show alert
						alert("This GSTIN is already registered!");

						// Clear input
						input.value = "";
						setTimeout(() => input.focus(), 0);
					} else {
						errorBox.style.display = "none";
						input.style.borderColor = "#28a745";
					}
				})
				.catch(() => {
					errorBox.style.display = "block";
					errorBox.textContent = "Error checking GSTIN.";
					input.style.borderColor = "red";
				});

		} else {
			errorBox.style.display = "block";
			errorBox.textContent = "Invalid GSTIN format.";
			input.style.borderColor = "red";
			input.value = "";
			setTimeout(() => input.focus(), 0);
		}
	}

</script>

<script>
 const pattern = /^UDYAM-[A-Z]{2}-\d{2}-\d{7}$/;

// Convert input to uppercase while typing
$('#msme_number').on('input', function () {
    this.value = this.value.toUpperCase();
    $('#msme-error').text('');
    $('#submitBtn').prop('disabled', true); // Always disable while typing
});

// Validate on blur
$('#msme_number').on('blur', function () {
    const msme = $(this).val().trim().toUpperCase();
    $('#msme-error').text('');
    $('#submitBtn').prop('disabled', true); // Disable initially

    // Format check
    if (!pattern.test(msme)) {
        $('#msme-error').text('Invalid format. Use UDYAM-XX-00-0000000');
        return;
    }

    // AJAX check if MSME already exists
    $.ajax({
        url: '/check-msme-supplier',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            msme_number: msme
        },
        success: function (response) {
            if (response.exists) {
                $('#msme-error').text('MSME/Udyam number already exists.');
                $('#submitBtn').prop('disabled', true);
            } else {
                $('#submitBtn').prop('disabled', false); // ✅ Enable if valid and unique
            }
        },
        error: function () {
            $('#msme-error').text('Server error occurred.');
            $('#submitBtn').prop('disabled', true);
        }
    });
});

</script>

	
	@include('layouts.footer')