@extends('admin.layouts.app')

@section('content')
@push('scripts')
    <style>
        .error-message {
    color: red;
}
    </style>
@endpush
        <div class="container-fluid py-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.customers.index') }}">Customer Listing</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                        Customer Create</li>
                </ol>
            </nav>
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-between">
                        <div class="col-md-5">
                            <a class="btn bg-gradient-info mb-3" href="{{ route('admin.customers.index') }}">Back</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <form role="form" action="{{ route('admin.customers.store') }}" method="POST">
                        @csrf
                        <div class="row justify-content-center">
                            <div class="col-md-7 col-sm-12">
                                <div class="card pt-4 mb-4">
                                    <div class="card-body pt-0 pb-2">
                                        <div class="row justify-content-center">
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Customer Name <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="Customer Name"
                                                                aria-label="Customer Name" aria-describedby="username-addon" id="customer_name"
                                                                name="customer_name" value="{{ old('customer_name') }}" required>
                                                            <div id="customer_name_error" class="text-danger">
                                                                @error('customer_name')
                                                                    <span class="error-message ">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Customer ID</label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="50101"
                                                                aria-label="Customer ID" aria-describedby="username-addon" name="customer_id"
                                                                value="{{ @$customerId }}" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Phone No <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="09805363015"
                                                                aria-label="Phone No" aria-describedby="username-addon" id="phone_no"
                                                                name="phone_no" value="{{ old('phone_no') }}" maxlength="10" required>
                                                            <div id="phone_no_error" class="text-danger">
                                                                @error('phone_no')
                                                                <span class="error-message ">{{ $message }}</span>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Reference ID <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="00101"
                                                                aria-label="Reference ID" aria-describedby="username-addon" id="reference_id"
                                                                name="reference_id" value="{{ old('reference_id') }}"
                                                                pattern="[A-Za-z0-9]{1,10}" required>
                                                                <div id="reference_id_error" class="text-danger"></div>
                                                            @error('reference_id')
                                                            <span class="error-message ">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Email <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="email" class="form-control customer_email" placeholder="Email"
                                                                aria-label="Email" aria-describedby="username-addon" id="email" name="email"
                                                                value="{{ old('email') }}" required>
                                                            <div id="email_error" class="text-danger"></div>
                                                            <div id="email-availability" class="text-info"></div>
                                                            @error('email')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Type <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    id="inlineRadio1" value="1"
                                                                    checked name="type" required>
                                                                <label class="form-check-label" for="inlineRadio1"
                                                                    style="font-weight: 600;">Bluestar</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    id="inlineRadio2" value="2" name="type" required>
                                                                <label class="form-check-label" for="inlineRadio2"
                                                                    style="font-weight: 600;">TAPL</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio"
                                                                    id="inlineRadio3" value="3" name="type" required>
                                                                <label class="form-check-label" for="inlineRadio3"
                                                                    style="font-weight: 600;">ODS</label>
                                                            </div>
                                                            <div id="type_error" class="text-danger"></div>
                                                        </div>
                                                        </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Address Line 1 <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="Address Line 1"
                                                                aria-label="Address Line 1" aria-describedby="username-addon" id="address_line_one"
                                                                name="address_line_one" value="{{ old('address_line_one') }}" required>
                                                            <div id="address_line_one_error" class="text-danger"></div>
                                                            @error('address_line_one')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Contract No <span class="requered-mark">*</span><span class="text-danger">Default:0001</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="1234567890"
                                                                aria-label="Contract No" aria-describedby="username-addon" id="contract_no"
                                                                name="contract_no" value="{{ old('contract_no', '0001') }}" maxlength="10" required>
                                                            <div id="contract_no_error" class="text-danger"></div>
                                                            @error('contract_no')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Address Line 2 <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="Address Line 2"
                                                                aria-label="Address Line 2" aria-describedby="username-addon" id="address_line_second"
                                                                name="address_line_second" value="{{ old('address_line_second') }}" required>
                                                            <div id="address_line_second_error" class="text-danger"></div>
                                                            @error('address_line_second')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Executive Name <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <select class="form-select w-100" id="validationCustom04" name="executive_name" required>
                                                                <option selected="" readonly="" value="">Executive</option>
                                                                @foreach ($staffs as $staff)
                                                                    <option value="{{ $staff->id }}">{{ $staff->staff_name }}</option>
                                                                @endforeach
                                                            </select>
                                                            <div id="customer_name_error" class="text-danger"></div>
                                                            @error('executive_name')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>State<span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <select class="form-select w-100" id="stateSelect" name="state" required>
                                                                <option value="">State</option>
                                                                @foreach($states as $stateName)
                                                                    <option value="{{ $stateName->state_id }}" {{ $stateName->state_title === 'Kerala' ? 'selected' : '' }}>
                                                                        {{ $stateName->state_title }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                            @error('state')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Create Date <span class="required-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="date" class="form-control" id="create_date" name="create_date"
                                                                   value="{{ old('create_date', now()->format('Y-m-d')) }}" required>
                                                            <div id="create_date_error" class="text-danger"></div>
                                                            @error('create_date')
                                                                <span class="error-message">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>District</label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <select class="form-select w-100" id="districtSelect" name="district" required>
                                                                <!-- Options for districts -->
                                                                <option value="">District</option>
                                                                @foreach($districts as $district)
                                                                    <option value="{{ $district->districtid }}" {{ $district->districtid == 634 ? 'selected' : '' }}>
                                                                        {{ $district->district_title }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Division <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="inlineCheckbox1" value="1" name="division[]"
                                                                    {{ in_array(1, old('division', [])) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="inlineCheckbox1"
                                                                    style="font-weight: 600;">PAD</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="inlineCheckbox2" value="2" name="division[]"
                                                                    {{ in_array(2, old('division', [])) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="inlineCheckbox2"
                                                                    style="font-weight: 600;">RAD</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="checkbox"
                                                                    id="inlineCheckbox3" value="3" name="division[]"
                                                                    {{ in_array(3, old('division', [])) ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="inlineCheckbox3"
                                                                    style="font-weight: 600;">NAD</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>City <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="City"
                                                                aria-label="City" aria-describedby="username-addon" id="city" name="city"
                                                                value="{{ old('city') }}" required>
                                                            <div id="city_error" class="text-danger"></div>
                                                            @error('city')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Pincode <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control"
                                                                placeholder="980531" aria-label="Pincode"
                                                                aria-describedby="username-addon" id="pincode" name="pincode"
                                                                value="{{ old('pincode') }}" maxlength="6" required>
                                                            <div id="pincode_error" class="text-danger"></div>
                                                            @error('pincode')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Billing Address</label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <textarea style="height: 128px;" class="form-control"
                                                                placeholder="Billing Address" id="billing_address" name="billing_address">{{ old('billing_address') }}</textarea>
                                                            <div id="billing_address_error" class="text-danger"></div>
                                                            @error('billing_address')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Is TAX Applicable <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="inlineRadio4" value="1" name="tax_applicable" required>
                                                                <label class="form-check-label" for="inlineRadio4" style="font-weight: 600;">Yes</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="inlineRadio5" value="0" name="tax_applicable" required>
                                                                <label class="form-check-label" for="inlineRadio5" style="font-weight: 600;">No</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Contact Person <span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control"
                                                                placeholder="Contact Person Name" aria-label="Contact Person Name"
                                                                aria-describedby="username-addon" id="contact_person" name="contact_person"
                                                                value="{{ old('contact_person') }}" required maxlength="10">
                                                            <div id="contact_person_error" class="text-danger"></div>
                                                            @error('contact_person')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3" style="display: none;">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>GST No<span class="requered-mark">*</span></label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="">
                                                            <input type="text" class="form-control" placeholder="GH/0001/0213/0548TY" aria-label="GST No" aria-describedby="username-addon" name="gst_no" value="{{ old('gst_no') }}" maxlength="15">
                                                            <div class="text-danger gst_no_error"></div>
                                                            @error('gst_no')
                                                                <span class="error-message ">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-9 mb-3">
                                                <div class="row align-items-center">
                                                    <div class="col-md-5">
                                                        <label>Contact Person No</label>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="mb-3">
                                                            <input type="text" class="form-control"
                                                                placeholder="+91 9805363015" id="contact_person_no" name="contact_person_no"
                                                                value="{{ old('contact_person_no') }}" maxlength="10">
                                                            <div id="contact_person_no_error" class="text-danger"></div>
                                                            @error('contact_person_no')
                                                            <span class="error-message ">{{ $message }}</span>
                                                        @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <input type="submit" value="Save" class="btn bg-gradient-info mb-3"
                                                style="max-width:150px;" id="saveButton" role="button">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body pb-0">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Register</h1>
                            <p><span style="color: #198754;">Data Saved Successfully.</span>
                            </p>
                        </div>
                        <div class="modal-footer border-0 pt-0">
                            <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button> -->
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_customer.html">Ok</a>
                        </div>
                    </div>
                </div>
            </div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>

<script>
    
    $("#phone_no").on("input", function () {
    // Remove non-numeric characters and limit the length to 10 digits
    var inputValue = $(this).val().replace(/\D/g, "").substr(0, 10);

    // Update the input value with only numeric characters and up to 10 digits
    $(this).val(inputValue);
});

$("#pincode").on("input", function () {
    // Remove non-numeric characters and limit the length to 10 digits
    var inputValue = $(this).val().replace(/\D/g, "").substr(0, 6);

    // Update the input value with only numeric characters and up to 10 digits
    $(this).val(inputValue);
});


// Function to validate Reference ID
function validateReferenceID() {
    const referenceID = $("#reference_id").val();
    const referenceIDError = $("#reference_id_error");

    if (!referenceID.match(/^[A-Za-z0-9]*$/)) {
        referenceIDError.text("Reference ID can only contain alphanumeric characters.");
        return false;
    } else if (referenceID.length > 10) {
        referenceIDError.text("Reference ID should not exceed 10 characters.");
        return false;
    } else {
        referenceIDError.text(""); // Clear any previous error message
        return true;
    }
}
$("#saveButton").click(function () {



// Add an event listener to validate on input change
$("#reference_id").on("input", validateReferenceID);





    // Remove any existing error messages
    $(".text-danger").html('');

    // Perform client-side validation
    var isValid = true;

    function validateInput(inputId, errorMessage, validationRule) {
        var value = $(inputId).val();
        if (!value) {
            $(inputId + "_error").text(errorMessage);
            isValid = false;
        } else if (validationRule && !validationRule.test(value)) {
            $(inputId + "_error").text("Invalid " + errorMessage.toLowerCase());
            isValid = false;
        }
    }

    // Validate Customer Name
    // validateInput("#customer_name", "Customer Name is required.");

    // Validate Customer ID (No need for validation as it's readonly)

    // Validate Phone No
    // validateInput("#phone_no", "Phone No is required.", /^\d{10}$/);
    // validateInput("#phone_no", "Phone No must be 10 digits.", null);

    // Validate Reference ID
    // validateInput("#reference_id", "Reference ID is required.");

    // Validate Email
    // validateInput(
    //     "#email",
    //     "Email is required.",
    //     /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
    // );
    // validateInput("#email", "Invalid email format.", null);

    // Validate Type (Radio buttons, no need for validation)

    // Validate Address Line 1
    // validateInput("#address_line_one", "Address Line 1 is required.");

    // Validate Contract No
    // validateInput("#contract_no", "Contract No is required.");

    // Validate Address Line 2
    // validateInput("#address_line_second", "Address Line 2 is required.");
    // Validate City
    // validateInput("#city", "City is required.");

    // Validate Pincode
    // validateInput("#pincode", "Pincode must be 6 digits.", /^\d{6}$/);

    // Validate Billing Address (Textarea, no need for validation)
    // validateInput("#billing_address", "Billing Address is required.");

    // Validate Is TAX Applicable (Radio buttons, no need for validation)
    // validateInput("#contact_person", "Contact Person Name is required.");

    // Validate Contact Person
    // validateInput("#contact_person_no", "Contact Person No is required.");

    // Validate GST No
    // validateInput("#gst_no_error", "GST No. is required.");
    // You can add validation for GST No here if needed

    // Submit the form if no errors
    if (isValid) {
        // Add your form submission logic here
        $("#customer-form").submit(); // This submits the form with id "customer-form"
    }
    // Return whether the form is valid
    return isValid;
});


// Function to check email availability
$('.customer_email').on('change', function () {
    var csrfToken = $('meta[name="csrf-token"]').attr('content');
    var email = $(this).val();

    // Send an AJAX request to check email availability
    $.ajax({
        type: 'POST',
        url: "{{ route('admin.customer-check-email-availability') }}",
        data: {
            customer_email: email
        },
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function (data) {
    if (data.error) {
        console.error(data.error); // Log the error to the console
    } else {
        if (data.available) {
            $('#email-availability').text('Email is available.').addClass('text-success').removeClass('text-danger');
        } else {
            $('#email-availability').text('Email is already taken.').addClass('text-danger').removeClass('text-success');
        }
    }
},
error: function (xhr, textStatus, errorThrown) {
    console.error(xhr.responseText); // Log the error to the console
}

    });
});



$(document).ready(function () {

    // Add change event listener to the tax_applicable radio buttons
$("input:radio[name='tax_applicable']").change(function () {
            var selectedValue = $(this).val();
            console.log(selectedValue);
            var gstNoContainer = $('.gstNoContainer');
            var gstNoError = $('.gst_no_error');
            if (selectedValue === "1") {
                // Show the GST No input field
                gstNoContainer.show();
                gstNoInput.val(''); // Clear the input field
                gstNoError.text(''); // Clear any existing error messages
            } else {
                // Hide the GST No input field, clear the input field, and clear any existing error messages
                gstNoContainer.hide();
                gstNoInput.val(''); // Clear the input field
                gstNoError.text('');
            }

        });

        $("#contact_person_no").on("input", function () {
        // Remove non-numeric characters and limit the length to 10 digits
        var inputValue = $(this).val().replace(/\D/g, "").substr(0, 10);

        // Update the input value with only numeric characters and up to 10 digits
        $(this).val(inputValue);
    });
    
    // Disable the district select by default
    $('#districtSelect').prop('readonly', true);

    // Event handler for state selection change
    $('#stateSelect').on('change', function () {
        var selectedStateId = $(this).val();

        // Enable or disable the district select based on state selection
        if (selectedStateId) {
            $('#districtSelect').prop('readonly', false);
            // Send the selected state_id as data in the AJAX request
            $.ajax({
                url: '{{ route("admin.customer-district-list") }}', // Replace with your backend route
                method: 'GET',
                data: {
                    stateId: selectedStateId
                },
                success: function (data) {
                    // Clear existing options
                    $('#districtSelect').empty();

                    // Populate the district select with new options
                    $.each(data, function (key, value) {
                        $('#districtSelect').append('<option value="' + key + '">' + value + '</option>');
                    });
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    // Handle error as needed
                }
            });
        } else {
            $('#districtSelect').prop('readonly', true).val('');
        }
    });
});
</script>

@endsection