@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>Add Supplier</h4>
							<h6>Create new supplier</h6>
						</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('save_supplier')}}" method="post" id="myForm">
					@csrf
					<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="{{ $newSupplierId }}" required readonly>
												</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" id="supplier_name" placeholder="Enter Supplier Name" required><small id="supplier-error" style="color: red; display: none;">This supplier is already added!</small>
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Warehouse (can select multiple)</label>
													<select class="select" name="warehouse_id[]" required multiple>
													
														<option value="">Choose</option>
														@foreach($warehouses as $row)
														<option value="{{ $row->id}}">{{ $row->warehouse_name}}</option>
														@endforeach
													</select>
												</div>
											</div>
                                            <div class="col-lg-3 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" placeholder="Enter Contact Person" required>
												</div>
											</div>
											<div class="col-lg-3 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Top</label>
													<input type="text" id="top" name="top" class="form-control" readonly required>
												</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">
															<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">
															<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" style="display: 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;"  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:none">
												<div class="mb-3 add-product">
													<label class="form-label">MSME</label>
													<input type="text" name="msme" id="msme_number" 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-3 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">GST No</label>
													
													<input type="text"   name="gst_no" class="form-control" id="gst_no" placeholder="Enter GST No" maxlength="15" required 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">
												<div class="mb-3 add-product">
													<label class="form-label">MSME</label>
													<input type="text" name="msme" id="msme_number"  class="form-control" placeholder="Enter MSME" required>
												<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"  placeholder="Enter Code" required 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" placeholder="Enter Phone1" required 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" placeholder="Enter Phone2" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</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">Mobile No</label>
													<input type="text" name="mobile_no" class="form-control list" placeholder="Enter Mobile No" onkeypress="return event.charCode >= 48 && event.charCode <= 57 && this.value.length < 10" required>

												</div>
											</div>
                                            <div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Fax No</label>
													<input type="text" name="fax" class="form-control list" placeholder="Enter Fax No" 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">Email</label>
													<input type="email" name="email" class="form-control list" placeholder="Enter Email" required>

												</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" placeholder="Enter Address" required></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" placeholder="Enter 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" placeholder="Enter 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" placeholder="Enter PIN Code" 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="{{ route('suppliers') }}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" id="submitBtn" class="btn btn-submit">Save Supplier</button><p id="message" style="color: red;">
						</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 Created Successfully.","{{ route('suppliers') }}");
					},
					error: function(xhr) {
						$('#global-loader').hide();
						errorMessage();
					}
				});
			});
       
        $('#top').val('');
        
      
        $('#gst_no').on('input', function() {
            var gstNo = $(this).val(); 

            if (gstNo.length === 0) {
                
                $('#top').val('');
            } else if (gstNo.includes('27')) {
               
                $('#top').val('MSP');
            } else {
                
                $('#top').val('OMS');
            }
        });
    });	</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').show(); 
				$('#msme').show(); 
		} else {
			$('#gst_no').hide(); 
				$('#msme').hide(); 
		}
	});
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>
	 document.getElementById("myForm").addEventListener("submit", function(event) {
        let submitBtn = document.getElementById("submitBtn");
        if (submitBtn.disabled) {
            event.preventDefault(); 
            alert("Please wait, your info is submitted.");
        } else {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
    
     $("#supplier_name").on("keyup blur", function (e) { 
        let supplier_name = $(this).val();
       
            $.ajax({
                url: "{{ route('check_supplier_exists') }}",
                type: "POST",
                data: {
                    supplier_name: supplier_name,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.exists) {
                        $("#supplier-error").show(); 
                        $("#supplier_name").addClass("error-field"); 
                        $("#supplier_name").focus(); 
                         $("#submitBtn").prop("disabled", true);
                        $("#message")
            .text("This supplier  name is already used, try another.")
            .css({ "color": "red", "font-weight": "bold", "display": "block", "visibility": "visible" })
            .show();
                    } else {
                        $("#supplier-error").hide(); 
                        $("#supplier_name").removeClass("error-field"); 
                    }
                }
            });
            $("#submitBtn").prop("disabled", false);
         $("#message").hide();
        
    });
    
    $("#supplier_name").on("keydown", function (e) {
        if (e.key === "Tab" && $("#supplier-error").is(":visible")) {
            e.preventDefault(); 
        }
    });
    
    </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')