@section('title','Edit Store Locator')
@include('layout.header')
@include('layout.sidebar')
<style>
    .error{
        color: red;
    }
</style>

<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Edit Store
            Locator</h1>
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <li class="breadcrumb-item text-muted">
                <a href="index.html" class="text-muted text-hover-primary">Home</a>
            </li>
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <li class="breadcrumb-item text-muted">Edit Store Locator</li>
        </ul>
    </div>

</div>
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card mb-5 mb-xl-8">
            <div class="card-body py-3">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="english-tab" data-bs-toggle="tab" data-bs-target="#english"
                            type="button" role="tab" aria-controls="home" aria-selected="true">English</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="hindi-tab" data-bs-toggle="tab" data-bs-target="#hindi"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Hindi</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="gujarati-tab" data-bs-toggle="tab" data-bs-target="#gujarati"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Gujarati</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <form action="{{ url('StoreLocator/edit-store-locator/'.$lang.'/'.encrypt($storLocat->id)) }}" method="POST" id="store_locator_form">
                    @method('PUT')
                        @csrf
                        <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="home-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    
                                    <div class="col-md-6 mt-3">
                                        <label  for="store_name_en" class="form-label">Store Name <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="store_name_en" name="store_name_en" value="{{ old('store_name_en', $storLocat->store_name_en) }}" placeholder="Store Name" >
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_1_en" class="form-label">Address Line 1 <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_1_en" name="address_line_1_en" value="{{ old('address_line_1_en', $storLocat->address_line_1_en) }}" placeholder="Address Line 1" >
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_2_en" class="form-label">Address Line 2</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_2_en" name="address_line_2_en" value="{{ old('address_line_2_en', $storLocat->address_line_2_en) }}" placeholder="Address Line 2" >
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="state_en" class="form-label">State <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="state_en" id="state_en" data-control="select2"  value="{{ old('state_en', $storLocat->state_en) }}" data-placeholder="Select State">
                                                <option value=""> Select State </option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}" {{ old('state_en', $storLocat->state_en) == $state->id ? 'selected' : ''}}> {{ $state->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="city_en" class="form-label">City <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                            <select class="form-select" name="city_en" id="city_en" data-control="select2" value="{{ old('city_en', $storLocat->city_en) }}" data-placeholder="Select City">
                                                <option value=""> Select City </option>
                                                @foreach($citys as $city)
                                                    <option value="{{ $city->id }}" {{ old('city_en', $storLocat->city_en) == $city->id ? 'selected' : ''}}> {{ $city->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="pincode_en" class="form-label">Pincode <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="number" class="form-control" maxlength="6" minlength="6" id="pincode_en" name="pincode_en" value="{{ old('pincode_en', $storLocat->pincode_en) }}" placeholder="Pincode" >
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="latitude_en" class="form-label">Latitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="latitude_en" name="latitude_en" value="{{ old('latitude_en', $storLocat->latitude_en) }}" placeholder="Latitude" >
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label  for="longitude_en" class="form-label">Longitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="longitude_en" name="longitude_en" value="{{ old('longitude_en', $storLocat->longitude_en) }}" placeholder="Longitude" >
                                        </div>
                                    </div>

                                    

                                    <div class="row mt-3">
                                        @if(isset($storContact->id))
                                            <input type="hidden" name="store_contact_id" value="{{$storContact->id}}">
                                            @if(is_array($storeContactEns))
                                                                                               @foreach($storeContactEns as $storeContactEn)
                                                    @if($count == 0 || $storeContactEn == "")
                                                        <div class='items_en col-md-5 mt-3'>
                                                            <label  for="contact_number_en" class="form-label">Contact Number</label>
                                                            <div class="form-group mb-5">
                                                                <input type="number" maxlength="15" minlength="10" class="form-control " id="contact_number_en" name="contact_number_en[]" value="{{$storeContactEn}}" placeholder="Contact Number" >
                                                            </div>
                                                        </div>
                                                        <div class='items_en col-md-1  mt-12'><span id="add_en" class="btn btn-primary btn-sm">Add +</span></div>
                                                        <div id="items_en"></div> 
                                                    @else
                                                        <div class="row">
                                                            <div class='items_en col-md-5 mt-3'>
                                                                <label  for="contact_number_en" class="form-label">Contact Number</label>
                                                                <div class="form-group mb-5">
                                                                    <input type="number" maxlength="15" minlength="10" class="form-control contact-number-en" id="contact_number_en" name="contact_number_en[]" value="{{$storeContactEn}}" placeholder="Contact Number" >
                                                                </div>
                                                            </div>
                                                        <div class='items_en col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_en">X</span></div>
                                                            <div id="items_en"></div>
                                                        </div>
                                                    @endif
                                                                                                    @endforeach
                                            @endif
                                        @endif
                                    </div>

                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                         <a  href="{{ url('/StoreLocator')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="hindi" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label  for="store_name_hi" class="form-label">Store Name <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="store_name_hi" name="store_name_hi"  value="{{ old('store_name_hi', $storLocat->store_name_hi) }}" placeholder="Store Name">
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_1_hi" class="form-label">Address Line 1 <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_1_hi" name="address_line_1_hi" value="{{ old('address_line_1_hi', $storLocat->address_line_1_hi) }}" placeholder="Address Line 1">
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_2_hi" class="form-label">Address Line 2</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_2_hi" name="address_line_2_hi" value="{{ old('address_line_2_hi', $storLocat->address_line_2_hi) }}" placeholder="Address Line 2">
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="state_hi" class="form-label">State <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="state_hi" id="state_hi" data-control="select2" Required>
                                                <option value=""> Select State </option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}" {{ old('state_hi', $storLocat->state_hi) == $state->id ? 'selected' : ''}}> {{ $state->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="city_hi" class="form-label"> City <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                            <select class="form-select" name="city_hi" id="city_hi" data-control="select2" Required>
                                                <option value=""> Select City </option>
                                                @foreach($citys as $city)
                                                    <option value="{{ $city->id }}" {{ old('city_hi', $storLocat->city_hi) == $city->id ? 'selected' : ''}}> {{ $city->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="pincode_hi" class="form-label">Pincode <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="number" class="form-control" maxlength="6" minlength="6" id="pincode_hi" name="pincode_hi"  value="{{ old('pincode_hi', $storLocat->pincode_hi) }}" placeholder="Pincode">
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="latitude_hi" class="form-label">Latitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="latitude_hi" name="latitude_hi" value="{{ old('latitude_hi', $storLocat->latitude_hi) }}" placeholder="Latitude">
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="longitude_hi" class="form-label">Longitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="longitude_hi" name="longitude_hi" value="{{ old('longitude_hi', $storLocat->longitude_hi) }}" placeholder="Longitude">
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        @if(isset($storContact->id))
                                            <input type="hidden" name="store_contact_id" value="{{$storContact->id}}">
                                            @if(is_array($storeContactHis))
                                                                                               @foreach($storeContactHis as $storeContactHi)
                                                    @if($count == 0 || $storeContactHi == "")
                                                        <div class='items_hi col-md-5 mt-3'>
                                                            <label  for="contact_number_hi" class="form-label">Contact Number</label>
                                                            <div class="form-group mb-5">
                                                                <input type="number" class="form-control contact_number_hi" maxlength="15" minlength="10" id="contact_number_hi" name="contact_number_hi[]" value="{{$storeContactHi}}" placeholder="Contact Number" >
                                                            </div>
                                                        </div>
                                                        <div class='items_hi col-md-1  mt-12'><span id="add_hi" class="btn btn-primary btn-sm">Add +</span></div>
                                                        <div id="items_hi"></div> 
                                                    @else
                                                        <div class="row">
                                                            <div class='items_hi col-md-5 mt-3'>
                                                                <label  for="contact_number_hi" class="form-label">Contact Number</label>
                                                                <div class="form-group mb-5">
                                                                    <input type="number"  maxlength="15" minlength="10" class="form-control contact_number_hi" id="contact_number_hi" name="contact_number_hi[]" value="{{$storeContactHi}}" placeholder="Contact Number" >
                                                                </div>
                                                            </div>
                                                        <div class='items_hi col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_hi">X</span></div>
                                                            <div id="items_hi"></div>
                                                        </div>
                                                    @endif
                                                                                                    @endforeach
                                            @endif
                                        @endif
                                    </div>

                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                         <a  href="{{ url('/StoreLocator')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade d-none" id="gujarati" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="mt-5">
                                <div class="row mt-6">
                                    <div class="col-md-6 mt-3">
                                        <label  for="store_name_gu" class="form-label">Store Name <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text"  class="form-control " id="store_name_gu" name="store_name_gu" value="{{ old('store_name_gu', $storLocat->store_name_gu) }}" placeholder="Store Name" >
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_1_gu" class="form-label">Address Line 1 <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_1_gu" name="address_line_1_gu" value="{{ old('address_line_1_gu', $storLocat->address_line_1_gu) }}" placeholder="Address Line 1" >
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 mt-3">
                                        <label  for="address_line_2_gu" class="form-label">Address Line 2</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="address_line_2_gu" name="address_line_2_gu" value="{{ old('address_line_2_gu', $storLocat->address_line_2_gu) }}" placeholder="Address Line 2" >
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="state_gu" class="form-label">State <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <select class="form-select" name="state_gu" data-control="select2" id="state_gu" value="{{ old('state_gu', $storLocat->state_gu) }}" data-placeholder="Select State">
                                                <option value=""> Select State </option>
                                                @foreach($states as $state)
                                                    <option value="{{ $state->id }}" {{ old('state_gu', $storLocat->state_gu) == $state->id ? 'selected' : ''}}> {{ $state->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="city_gu" class="form-label">City <span class="error"> * </span></label>
                                            <div class="form-group mb-5">
                                            <select class="form-select" name="city_gu" id="city_gu" data-control="select2" value="{{ old('city_gu', $storLocat->city_gu) }}"  data -placeholder="Select City">
                                                <option value=""> Select City </option>
                                                @foreach($citys as $city)
                                                    <option value="{{ $city->id }}" {{ old('city_gu', $storLocat->city_gu) == $city->id ? 'selected' : ''}}> {{ $city->name }} </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="pincode_gu" class="form-label"> Pincode <span class="error"> * </span></label>
                                        <div class="form-group mb-5">
                                            <input type="number" class="form-control" maxlength="6" minlength="6" id="pincode_gu" name="pincode_gu" value="{{ old('pincode_gu', $storLocat->pincode_gu) }}" placeholder="Pincode" >
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="latitude_gu" class="form-label">Latitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="latitude_gu" name="latitude_gu" value="{{ old('latitude_gu', $storLocat->latitude_gu) }}" placeholder="Latitude" >
                                        </div>
                                    </div>
                                
                                    <div class="col-md-6 mt-3">
                                        <label  for="longitude_gu" class="form-label">Longitude</label>
                                        <div class="form-group mb-5">
                                            <input type="text" class="form-control " id="longitude_gu" name="longitude_gu" value="{{ old('longitude_gu', $storLocat->longitude_gu) }}" placeholder="Longitude" >
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        @if(isset($storContact->id))
                                            <input type="hidden" name="store_contact_id" value="{{$storContact->id}}">
                                            @if(is_array($storeContactGus))
                                                                                               @foreach($storeContactGus as $storeContactGu)
                                                    @if($count == 0 || $storeContactGu == "")
                                                        <div class='items_gu col-md-5 mt-3'>
                                                            <label  for="contact_number_gu" class="form-label">Contact Number</label>
                                                            <div class="form-group mb-5">
                                                                <input type="number" maxlength="15" minlength="10"  class="form-control contact_number_gu" id="contact_number_gu" name="contact_number_gu[]" value="{{$storeContactGu}}" placeholder="Contact Number" >
                                                            </div>
                                                        </div>
                                                        <div class='items_gu col-md-1  mt-12'><span id="add_gu" class="btn btn-primary btn-sm">Add +</span></div>
                                                        <div id="items_gu"></div> 
                                                    @else
                                                        <div class="row">
                                                            <div class='items_gu col-md-5 mt-3'>
                                                                <label  for="contact_number_gu" class="form-label">Contact Number</label>
                                                                <div class="form-group mb-5">
                                                                    <input type="number" class="form-control contact_number_gu" maxlength="15" minlength="10" id="contact_number_gu" name="contact_number_gu[]" value="{{$storeContactGu}}" placeholder="Contact Number" >
                                                                </div>
                                                            </div>
                                                        <div class='items_gu col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_gu">X</span></div>
                                                            <div id="items_gu"></div>
                                                        </div>
                                                    @endif
                                                                                                    @endforeach
                                            @endif
                                        @endif
                                    </div>

                                    <div class="form-group mb-5 col-md-2">
                                        <button type="submit" class="form-control btn btn-primary">Submit</button>
                                    </div>
                                    <div class="form-group mb-5 col-md-2">
                                         <a  href="{{ url('/StoreLocator')}}"  class="form-control btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


@include('layout.footer')
<script>
     $(document).ready(function() {
        var attributeValue = '{{$lang}}';
        if(attributeValue == 'English'){
            $('#english-tab').click();
        }
        if(attributeValue == 'Hindi'){
            $('#hindi-tab').click();
        }
        if(attributeValue == 'Gujarati'){
            $('#gujarati-tab').click();
        }
    }); 
      $(document).ready(function() {
            //State selecte city by english
            $('#state_en').change(function() {
                var stateId = $(this).val();
                var lg = "en";
                if (stateId) {
                    fetchCities(stateId,lg);
                } else {
                    $('#city_en').empty().append('<option value="">Select City</option>');
                }
            });

            //State selecte city by hindi
            $('#state_hi').change(function() {
                var stateId = $(this).val();
                var lg = "hi";
                if (stateId) {
                    fetchCities(stateId,lg);
                } else {
                    $('#city_hi').empty().append('<option value="">Select City</option>');
                }
            });

            //State selecte city by gujarati
            $('#state_gu').change(function() {
                var stateId = $(this).val();
                var lg = "gu";
                if (stateId) {
                    fetchCities(stateId,lg);
                } else {
                    $('#city_gu').empty().append('<option value="">Select City</option>');
                }
            });

        });

        function fetchCities(stateId,lg) {
            $.ajax({
                url: '{{ url('StoreLocator/fetch-cities') }}', 
                type: 'get',
                data: {state_id: stateId},
                success:function(data) {
                    if(lg === "en"){
                        $('#city_en').html(data);
                    }else if(lg === "hi"){
                        $('#city_hi').html(data);
                    }else{
                        $('#city_gu').html(data);
                    }
                }         
            });
        }
</script>
<script>
    $("#store_locator_form").validate({
    debug: true,
    rules: {
        store_name_en: {required: true},
        store_name_hi: {required: true},
        store_name_gu: {required: true},

        address_line_1_en: {required: true},
        address_line_1_hi: {required: true},
        address_line_1_gu: {required: true},

        state_en: {required: true},
        state_hi: {required: true},
        state_gu: {required: true},

        city_en: {required: true},
        city_hi: {required: true},
        city_gu: {required: true},

        pincode_en: {required: true},
        pincode_hi: {required: true},
        pincode_gu: {required: true},

        'contact_number_en[]': {required: true,digits: true,minlength: 10,maxlength: 15, uniqueContact: true},
        'contact_number_hi[]': {required: true,digits: true,minlength: 10,maxlength: 15, uniqueContact1: true},
        'contact_number_gu[]': {required: true,digits: true,minlength: 10,maxlength: 15, uniqueContact2: true},

    },
    messages: {

            store_name_en: {
            required: 'Store Name is Required.',
            },

            store_name_hi: {
            required: 'Store Name is Required.',
            },

            store_name_gu: {
            required: 'Store Name is Required.',
            },

            address_line_1_en: {
            required: 'Address Line 1 is Required.',
            },

            address_line_1_hi: {
            required: 'Address Line 1 is Required.',
            },

            address_line_1_gu: {
            required: 'Address Line 1 is Required.',
            },

            state_en: {
            required: 'State is Required.',
            },

            state_hi: {
            required: 'State is Required.',
            },

            state_gu: {
            required: 'State is Required.',
            },

            city_en: {
            required: 'City is Required.',
            },

            city_hi: {
            required: 'City is Required.',
            },

            city_gu: {
            required: 'City is Required.',
            },

            pincode_en: {
            required: 'Pincode is Required.',
            },
            
            pincode_hi: {
            required: 'Pincode is Required.',
            },

            pincode_gu: {
            required: 'Pincode is Required.',
            },

            'contact_number_en[]': {
                required: "Contact number is Required.",
                digits: "Please enter only digits.",
                minlength: "Contact number must be at least 10 digits.",
                maxlength: "Contact number must not exceed 15 digits."
            },
            
            'contact_number_hi[]': {
                required: "Contact number is Required.",
                digits: "Please enter only digits.",
                minlength: "Contact number must be at least 10 digits.",
                maxlength: "Contact number must not exceed 15 digits."
            },

            'contact_number_gu[]': {
                required: "Contact number is Required.",
                digits: "Please enter only digits.",
                minlength: "Contact number must be at least 10 digits.",
                maxlength: "Contact number must not exceed 15 digits."
            },

    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    submitHandler: function(form) {
        $(".submit").attr("disabled", true);
        form.submit();
    }

});

$.validator.addMethod("uniqueContact", function (value, element) {
    var contactNumbers = $('.contact-number-en').map(function () {
        return $(this).val();
    }).get();
    return $.grep(contactNumbers, function (el, i) {
        return el === value;
    }).length === 1;
    }, "Duplicate contact numbers are not allowed.");


    $.validator.addMethod("uniqueContact1", function (value, element) {
    var contactNumbers1 = $('.contact-number-hi').map(function () {
        return $(this).val();
    }).get();
    return $.grep(contactNumbers1, function (el, i) {
        return el === value;
    }).length === 1;
    }, "Duplicate contact numbers are not allowed.");



    $.validator.addMethod("uniqueContact2", function (value, element) {
    var contactNumbers2 = $('.contact-number-gu').map(function () {
        return $(this).val();
    }).get();
    return $.grep(contactNumbers2, function (el, i) {
        return el === value;
    }).length === 1;
    }, "Duplicate contact numbers are not allowed.");

$('#english-tab').click(function(event) {
    $('#english').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-block');
});
$('#hindi-tab').click(function(event) {
    $('#hindi').removeClass("d-none");
    $('#hindi').addClass("d-block");
    $('#gujarati').addClass('d-none');
    $('#english').addClass('d-none');
});
$('#gujarati-tab').click(function(event) {
    $('#gujarati').removeClass("d-none");
    $('#hindi').addClass("d-none");
    $('#english').addClass('d-none');
    $('#gujarati').addClass('d-block');
});

$(document).ready(()=>{
    let template = ` <div class="row">
                    <div class='items_en col-md-5 mt-3'>
                        <label  for="contact_number_en" class="form-label">Contact Number</label>
                        <div class="form-group mb-5">
                            <input type="number" maxlength="15" minlength="10" class="form-control contact-number-en" id="contact_number_en" name="contact_number_en[]" placeholder="Contact Number" >
                        </div>
                    </div>
                    <div class='items_en col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_en">X</span></div>
                    <div id="items_en"></div>
                    </div>`;

    $("#add_en").on("click", ()=>{
        $("#items_en").append(template);
    })
    $("body").on("click", ".remove_en", (e)=>{
        $(e.target).parent("div").parent("div").remove();
    })
});


$(document).ready(()=>{
    let template = ` <div class="row">
                    <div class='items_hi col-md-5 mt-3'>
                        <label  for="contact_number_hi" class="form-label">Contact Number</label>
                        <div class="form-group mb-5">
                            <input type="number"  maxlength="15" minlength="10" class="form-control contact-number-hi" id="contact_number_hi" name="contact_number_hi[]" placeholder="Contact Number" >
                        </div>
                    </div>
                    <div class='items_hi col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_hi">X</span></div>
                    <div id="items_hi"></div>
                    </div>`;

    $("#add_hi").on("click", ()=>{
        $("#items_hi").append(template);
    })
    $("body").on("click", ".remove_hi", (e)=>{
        $(e.target).parent("div").parent("div").remove();
    })
});


$(document).ready(()=>{
    let template = ` <div class="row">
                    <div class='items_gu col-md-5 mt-3'>
                        <label  for="contact_number_gu" class="form-label">Contact Number</label>
                        <div class="form-group mb-5">
                            <input type="number" class="form-control contact-number-gu" maxlength="15" minlength="10" id="contact_number_gu" name="contact_number_gu[]" placeholder="Contact Number" >
                        </div>
                    </div>
                    <div class='items_gu col-md-1  mt-12'><span class="btn btn-danger btn-sm remove_gu">X</span></div>
                    <div id="items_gu"></div>
                    </div>`;

    $("#add_gu").on("click", ()=>{
        $("#items_gu").append(template);
    })
    $("body").on("click", ".remove_gu", (e)=>{
        $(e.target).parent("div").parent("div").remove();
    })
});
</script>