@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 Customer</h4>
							<h6>Create new customer</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('customers')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Customer</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_customer')}}" id="myForm"  method="post" enctype="multipart/form-data">
					@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>Customer 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-3 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Customer ID</label>
													<input type="text" name="customer_id" class="form-control" value="{{ $newCustomerId }}" readonly required>
												
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Customer Name</label>
													<input type="text" name="customer_name" class="form-control" placeholder="Enter Customer Name" required>
												</div>
											</div>
												
                                            <div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Customer Type</label>
                                                    <select class="form-control" name="customer_type" id="customer_type" required>
                                                        <option value="">Select Type</option>
                                                        <option value="Retail">Retail</option>
                                                        <option value="Wholesale">Wholesale</option>
                                                    </select>
												</div>
											</div>
											
											<div class="col-lg-4 col-sm-6 col-12" style="display:none;" id="customer_discount">
												<div class="mb-3 add-product">
													<label class="form-label">Customer Discount</label>
													<input type="text" name="customer_discount" class="form-control" placeholder="Enter Customer Discount in %" >
												</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" placeholder="Enter Contact Person" required>
												</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>

										<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-5 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-5 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">

												</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" id="email" required><small id="email-error" style="color: red; display: none;">This email is already registered!</small>

												</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"></textarea>
                                                
                                            </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">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>
                                        <!-- /Editor -->
									</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<a href="{{ route('customers') }}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" id="submitBtn" class="btn btn-submit">Save Customer</button><p id="message" style="color: red;">
						</div>
					</div>
				</form>
			<!-- /add -->

		</div>
	</div>
	</div>
	<!-- /Main Wrapper -->

	
	@include('layouts.footer')
	<script>
		$('#customer_type').on('change', function() {
		  var type = $('#customer_type').val();
		    if(type == 'Wholesale'){
				$('#customer_discount').show();
			}else{
				$('#customer_discount').hide();
			}
		});
		$('input[name="gst"]').on('change', function () {
            if ($(this).val() === 'Yes') {
                $('#gst_no').show(); 
				 $('#msme').show(); 
            } else {
                $('#gst_no').hide(); 
				 $('#msme').hide(); 
            }
        });
	</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 = ""; 
    }
});

document.getElementById("gst_no").addEventListener("input", function() {
    this.dataset.alertShown = "";
});

 document.getElementById("myForm").addEventListener("submit", function(event) {
        let submitBtn = document.getElementById("submitBtn");
        
        if (submitBtn.disabled) {
            event.preventDefault(); // Prevent form resubmission
            alert("Please wait, your info is submitted.");
        } else {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
    
        $("#email").on("keyup blur", function (e) { 
        let email = $(this).val();
       
            $.ajax({
                url: "{{ route('check_customeremail_exists') }}",
                type: "POST",
                data: {
                    email: email,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.exists) {
                        $("#email-error").show(); 
                        $("#email").addClass("error-field"); 
                        $("#email").focus(); 
                         $("#submitBtn").prop("disabled", true);
                        $("#message")
            .text("This email is already used, try another.")
            .css({ "color": "red", "font-weight": "bold", "display": "block", "visibility": "visible" })
            .show();
                    } else {
                        $("#email-error").hide(); 
                        $("#email").removeClass("error-field"); 
                    }
                }
            });
            $("#submitBtn").prop("disabled", false);
         $("#message").hide();
        
    });
    
    $("#email").on("keydown", function (e) {
        if (e.key === "Tab" && $("#email-error").is(":visible")) {
            e.preventDefault(); 
        }
    });

</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-customer/${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-customer',
        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);
        }
    });
});
$(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("Customer Created Successfully.","{{ route('customers') }}");
            },
            error: function(xhr) {
                $('#global-loader').hide();
                errorMessage();
            }
        });
    });
});

</script>