@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 Customer</h4>
							<h6>Edit 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('update_customer')}}" method="post" enctype="multipart/form-data" 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>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="{{ $data->customer_id}}" 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" value="{{ $data->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" {{ $data->customer_type == 'Retail' ? 'selected' : '' }}>Retail</option>
														<option value="Wholesale" {{ $data->customer_type == 'Wholesale' ? 'selected' : '' }}>Wholesale</option>
													</select>
													
												</div>
											</div>
											@if( $data->customer_type == 'Wholesale')
											<div class="col-lg-4 col-sm-6 col-12"  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" value="{{ $data->customer_discount}}" >
												</div>
											</div>
											@endif

											<!-- <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" value="{{ $data->customer_discount}}" >
												</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}}" 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"   {{ $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" >
												<div class="mb-3 add-product">
													<label class="form-label">GST No</label>
												
													<input type="text"   name="gst_no" class="form-control" value="{{ $data->gst_number}}" 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">
												<div class="mb-3 add-product">
													<label class="form-label">MSME</label>
													<input type="text" name="msme" id="msme_number" class="form-control" value="{{ $data->msme}}" >
												</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"  value="{{ $data->telephone_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" value="{{ $data->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" value="{{ $data->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" value="{{ $data->mobile}}"  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" value="{{ $data->fax}}" 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" value="{{ $data->email}}">

												</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>
                                        <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->zipcode}}" 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="{{ url('customers')}}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" class="btn btn-submit" id="submitBtn">Update Customer</button>
						</div>
					</div>
				</form>
			<!-- /add -->

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

	
	@include('layouts.footer')
	<script>
    // Show/Hide Customer Discount based on Customer Type
    $('#customer_type').on('change', function() {
        var type = $('#customer_type').val();
        if (type === 'Wholesale') {
            $('#customer_discount').show();
        } else {
            $('#customer_discount').hide();
        }
    });

    // Show/Hide GST No based on GST selection
    $('input[name="gst"]').on('change', function () {
        if ($(this).val() === 'Yes') {
            $('#gst_no').show();
			 $('#msme').show();
        } else {
            $('#gst_no').hide();
			 $('#msme').hide();
        }
    });

    // Initialize the visibility of GST No on page load
    $(document).ready(function() {
        if ($('input[name="gst"]:checked').val() === 'Yes') {
            $('#gst_no').show();
			 $('#msme').show();
        } else {
            $('#gst_no').hide();
			 $('#msme').hide();
        }
    });
</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 > 0) {
            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();
    $('#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 Updated Successfully.","{{ route('customers') }}");
            },
            error: function(xhr) {
                $('#global-loader').hide();
                errorMessage();
            }
        });
    });
});

</script>