@section('title','Add 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">Add 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">Add 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="{{ route('create-store-locator')}}" method="POST" id="store_locator_form">
                        @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" 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" 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" 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" data-placeholder="Select State">
                                                <option value=""> Select State </option>
                                            </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" data-placeholder="Select City">
                                                <option value=""> Select City </option>
                                            </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" maxlength="6" minlength="6" class="form-control " id="pincode_en" name="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" 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" placeholder="Longitude" >
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <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="text" maxlength="10" minlength="10" class="form-control contact-number-en number-only" id="contact_number_en" name="contact_number_en[]" 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>
                                    </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"  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" 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" 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" data-placeholder="Select State">
                                                <option value=""> Select State </option>
                                            </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" data-placeholder="Select City">
                                                <option value=""> Select City </option>
                                            </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" maxlength="6" minlength="6" class="form-control " id="pincode_hi" name="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" 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" placeholder="Longitude">
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <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="text" maxlength="10" minlength="10" class="form-control contact-number-hi number-only" id="contact_number_hi" name="contact_number_hi[]" 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>
                                    </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" 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" 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" 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" id="state_gu" data-control="select2" data-placeholder="Select State">
                                                <option value=""> Select State </option>
                                            </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" data-placeholder="Select City">
                                                <option value=""> Select City </option>
                                            </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" maxlength="6" minlength="6" class="form-control " id="pincode_gu" name="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" 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" placeholder="Longitude" >
                                        </div>
                                    </div>
                                    
                                    <div class="row mt-3">
                                        <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="text" maxlength="10" minlength="10" class="form-control contact-number-gu number-only" id="contact_number_gu" name="contact_number_gu[]" 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>
                                    </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() {

        $(function(){
            $('.number-only').keyup(function(e) {
                    if(this.value!='-')
                    while(isNaN(this.value))
                        this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                            .split('').reverse().join('');
                })
                .on("cut copy paste",function(e){
                    e.preventDefault();
                });
            
            });
            
        fetchStates();

            //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 fetchStates() {
            $.ajax({
                url: '{{ url("StoreLocator/fetch-states") }}',
                type: 'get',
                success:function(data) {
                    $('#state_en').html(data);
                    $('#state_hi').html(data);
                    $('#state_gu').html(data);
                }
            });
        }

        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,
            remote: {
                        url:"{{ url('StoreLocator/is-available-store-locator') }}",
                        type: "get",
                        async: false,
                        data: {
                            store_name_en: function() {
                            return $( "#store_name_en" ).val();
                                   }
                               }
                             }
        },
        store_name_hi: {
            required: true,
            remote: {
                        url:"{{ url('StoreLocator/is-available-store-locator') }}",
                        type: "get",
                        async: false,
                        data: {
                            store_name_hi: function() {
                            return $( "#store_name_hi" ).val();
                                   }
                               }
                             }
        },
        store_name_gu: {
            required: true,
            remote: {
                        url:"{{ url('StoreLocator/is-available-store-locator') }}",
                        type: "get",
                        async: false,
                        data: {
                            store_name_gu: function() {
                            return $( "#store_name_gu" ).val();
                                   }
                               }
                             }
        },
        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: 10, uniqueContact: true},
        'contact_number_hi[]': {required: true,digits: true,minlength: 10,maxlength: 10, uniqueContact1: true},
        'contact_number_gu[]': {required: true,digits: true,minlength: 10,maxlength: 10, uniqueContact2: true},
    },
    messages: {
           
            store_name_en: {
            required: 'Store Name is Required.',
            remote:"Store alredy exist!!"
            },

            store_name_hi: {
            required: 'Store Name is Required.',
            remote:"Store alredy exist!!"
            },

            store_name_gu: {
            required: 'Store Name is Required.',
            remote:"Store alredy exist!!"
            },

            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 10 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 10 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 10 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="text" class="form-control contact-number-en number-only" maxlength="10" minlength="10" 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="text" class="form-control contact-number-hi number-only" maxlength="10" minlength="10" 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="text" class="form-control contact-number-gu number-only" maxlength="10" 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>