WİP

addons/default/visiosoft/base-theme/resources/css/theme.css

@@ -8,4 +8,13 @@
 
 .table-img-100 {
     max-width: 100px;
+}
+
+.loading {
+    background-image: url("{{ img('visiosoft.theme.base::images/loading.gif').url }}");
+    background-position: center;
+    background-size: 25px;
+    background-repeat: no-repeat;
+    height: 50px;
+    width: 100%;
 }

addons/default/visiosoft/location-module/resources/css/filterLocation.css

@@ -1,4 +1,19 @@
-#location .select2-selection__rendered {
-    display: inline-block;
-    padding-left: 4px;
+.filter-location-back {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 200;
+    background-color: #000;
+    opacity: .3;
+    -ms-filter: "alpha(opacity=30)";
+    filter: alpha(opacity=30);
+    -ms-filter: "alpha(opacity=50)";
+
+}
+
+.filter-location-body ul li:hover {
+    background: #227af3;
+    color: #fff;
 }

addons/default/visiosoft/location-module/resources/js/filterLocation.js

@@ -1,155 +1,446 @@
-let searchParams = new URLSearchParams(window.location.search);
+// let searchParams = new URLSearchParams(window.location.search);
+//
+// //Set Select2 Type for Location Fields
+// $('.cities, .countries, .districts, .neighborhoods, .village').select2({
+//     placeholder: select_trans
+// });
+//
+//
+// FindLocations = (id, table, typeDb, divId, paramName = null) => {
+//     $.ajax({
+//         type: 'get',
+//         url: '/getlocations',
+//         data: {
+//             id: id,
+//             table: table,
+//             typeDb: typeDb,
+//         },
+//         success: function (response) {
+//             setLocations(response, id, table, typeDb, divId, paramName);
+//             return response;
+//         },
+//         error: function (err) {
+//             reject(Error("It broke"));
+//         }
+//     });
+// };
+//
+//
+// setLocations = (response, id, table, typeDb, divId, paramName) => {
+//
+//     //Add Options
+//     if(divId != ".cities")
+//     {
+//         $(divId).append("<option value></option>")
+//     }
+//     response.forEach(function (options) {
+//         $(divId).append("<option value=" + options.id + ">" + options.name + "</option>")
+//     });
+//
+//     //Set Selected Option
+//     if (paramName != null) {
+//         if (divId == ".cities") {
+//             $('.countries').val(searchParams.get('country'));
+//             $('.countries').select2();
+//             $('.cities').val(findParam("city[]"));
+//         } else {
+//             $(divId).val(searchParams.get(paramName));
+//         }
+//         $(divId).select2();
+//     }
+//
+// };
+//
+// //Category Change
+// $('.countries').on('change', function () {
+//     $('.cities').empty();
+//     var table = "cities";
+//     var typeDb = 'parent_country_id';
+//     var id = $(this).val();
+//     var divId = ".cities";
+//
+//     FindLocations(id, table, typeDb, divId);
+// });
+//
+// //City Change
+// $('.cities, .select2-selection__choice__remove').on('change', function () {
+//     $('.districts').empty();
+//     var table = "districts";
+//     var typeDb = 'parent_city_id';
+//     var id = $(this).val();
+//     var divId = ".districts";
+//
+//     FindLocations(id, table, typeDb, divId);
+// });
+//
+// //Districts Change
+// $('.districts').on('change', function () {
+//     var table = "neighborhoods";
+//     var typeDb = 'parent_district_id';
+//     var id = $(this).val();
+//     var divId = ".neighborhoods";
+//
+//     FindLocations(id, table, typeDb, divId);
+// });
+//
+// //Neighborhoods Change
+// $('.neighborhoods').on('change', function () {
+//     var table = "village";
+//     var typeDb = 'parent_neighborhood_id';
+//     var id = $(this).val();
+//     var divId = ".village";
+//
+//     FindLocations(id, table, typeDb, divId);
+// });
+//
+//
+// jQuery(document).ready(function ($) {
+//
+// }).promise().done(function () {
+//
+//     //Get City && Set Country
+//     if (searchParams.get('country') != '') {
+//         $('.cities').empty();
+//         var table = "cities";
+//         var typeDb = 'parent_country_id';
+//         var id = searchParams.get('country');
+//         var divId = ".cities";
+//         var paramName = 'city';
+//
+//         FindLocations(id, table, typeDb, divId, paramName);
+//     }
+//
+// }).promise().done(function () {
+//
+//     //get District  && set city
+//     if (findParam('city[]').length) {
+//         $('.districts').empty();
+//         var table = "districts";
+//         var typeDb = 'parent_city_id';
+//         var id = findParam('city[]');
+//         var divId = ".districts";
+//         var paramName = 'district';
+//
+//         FindLocations(id, table, typeDb, divId, paramName);
+//     }
+//
+// }).promise().done(function () {
+//
+//     //get neighborhood  && set districts
+//     if (searchParams.get('district') != '') {
+//         $('.neighborhoods').empty();
+//         var table = "neighborhoods";
+//         var typeDb = 'parent_district_id';
+//         var id = searchParams.get('district');
+//         var divId = ".neighborhoods";
+//         var paramName = 'neighborhood';
+//
+//         FindLocations(id, table, typeDb, divId, paramName);
+//     }
+//
+// }).promise().done(function () {
+//
+//     //get village  && set neighborhoods
+//     if (searchParams.get('neighborhood') != '') {
+//         $('.village').empty();
+//         var table = "village";
+//         var typeDb = 'parent_neighborhood_id';
+//         var id = searchParams.get('neighborhood');
+//         var divId = ".village";
+//         var paramName = 'village';
+//
+//         FindLocations(id, table, typeDb, divId, paramName);
+//     }
+//
+// });
 
-//Set Select2 Type for Location Fields
-$('.cities, .countries, .districts, .neighborhoods, .village').select2({
-    placeholder: select_trans
+
+var countries;
+var cities;
+var districts;
+var neighborhoods;
+var village;
+
+//Country
+$('.filter-country-btn').on('click', function () {
+    if (countries == undefined) {
+        var promiseForCountries = new Promise(function (resolve, reject) {
+            crud('', '/ajax/getCountry', 'POST', beforeSend(), function (callback) {
+                countries = callback;
+                resetValue('country', true, false)
+                $.each(countries, function (index, value) {
+                    $('.filter-location-modal .countries').append(item('country', value.id, value.name));
+                });
+                if (countries == "")
+                    $('.filter-location-modal .countries').html(null_msg);
+                resolve();
+            })
+        });
+
+        promiseForCountries.then(function () {
+            SelectOnClick();
+        })
+    }
+    $('.filter-location-modal .countries').show();
+    $('.filter-location-modal').show();
+    $('.filter-location-back').show();
+    scroolToModal()
+});
+
+//City
+$('.filter-city-btn').on('click', function () {
+    var countries_value = $('input[name="country"]').val();
+    if (cities == undefined || $(this).attr('data-parent') != countries_value) {
+        $(this).attr('data-parent', countries_value)
+        var promiseForCities = new Promise(function (resolve, reject) {
+            crud('id=' + countries_value, '/ajax/getCities', 'POST', beforeSend(), function (callback) {
+                cities = callback;
+                resetValue('city', true, false)
+                $.each(cities, function (index, value) {
+                    $('.filter-location-modal .cities').append(item('city', value.id, value.name));
+                });
+                if (cities == "")
+                    $('.filter-location-modal .cities').html(null_msg);
+                resolve();
+            })
+        });
+
+        promiseForCities.then(function () {
+            SelectOnClick();
+        })
+    }
+    $('.filter-location-modal .cities').show();
+    $('.filter-location-modal').show();
+    $('.filter-location-back').show();
+    scroolToModal()
+});
+
+//District
+$('.filter-district-btn').on('click', function () {
+    var city_value = $('input[name="city"]').val();
+    if (districts == undefined || $(this).attr('data-parent') != city_value) {
+        $(this).attr('data-parent', city_value)
+        var promiseForDistricts = new Promise(function (resolve, reject) {
+            crud('id=' + city_value, '/ajax/getDistricts', 'POST', beforeSend(), function (callback) {
+                districts = callback;
+                resetValue('district', true, false)
+                $.each(districts, function (index, value) {
+                    $('.filter-location-modal .districts').append(item('district', value.id, value.name));
+                });
+                if (districts == "")
+                    $('.filter-location-modal .districts').html(null_msg);
+                resolve();
+            })
+        });
+
+        promiseForDistricts.then(function () {
+            SelectOnClick();
+        })
+    }
+    $('.filter-location-modal .districts').show();
+    $('.filter-location-modal').show();
+    $('.filter-location-back').show();
+    scroolToModal()
+});
+
+//Neighborhood
+$('.filter-neighborhood-btn').on('click', function () {
+    var district_value = $('input[name="district"]').val();
+    if (neighborhoods == undefined || $(this).attr('data-parent') != district_value) {
+        $(this).attr('data-parent', district_value)
+        var promiseForNeighborhoods = new Promise(function (resolve, reject) {
+            crud('id=' + district_value, '/ajax/getNeighborhoods', 'POST', beforeSend(), function (callback) {
+                neighborhoods = callback;
+                resetValue('neighborhood', true, false)
+                $.each(neighborhoods, function (index, value) {
+                    $('.filter-location-modal .neighborhoods').append(item('neighborhood', value.id, value.name));
+                });
+                if (neighborhoods == "")
+                    $('.filter-location-modal .neighborhoods').html(null_msg);
+                resolve();
+            })
+        });
+
+        promiseForNeighborhoods.then(function () {
+            SelectOnClick();
+        })
+    }
+    $('.filter-location-modal .neighborhoods').show();
+    $('.filter-location-modal').show();
+    $('.filter-location-back').show();
+    scroolToModal()
+});
+
+//Village
+$('.filter-village-btn').on('click', function () {
+    var neighborhood_value = $('input[name="neighborhood"]').val();
+    if (village == undefined || $(this).attr('data-parent') != neighborhood_value) {
+        $(this).attr('data-parent', neighborhood_value)
+        var promiseForVillage = new Promise(function (resolve, reject) {
+            crud('id=' + neighborhood_value, '/ajax/getVillage', 'POST', beforeSend(), function (callback) {
+                village = callback;
+                $('.filter-location-modal .village').html("");
+                $.each(village, function (index, value) {
+                    $('.filter-location-modal .village').append(item('village', value.id, value.name));
+                });
+                if (village == "")
+                    $('.filter-location-modal .village').html(null_msg);
+                resolve();
+            })
+        });
+
+        promiseForVillage.then(function () {
+            SelectOnClick();
+        })
+    }
+    $('.filter-location-modal .village').show();
+    $('.filter-location-modal').show();
+    $('.filter-location-back').show();
+    scroolToModal()
 });
 
 
-FindLocations = (id, table, typeDb, divId, paramName = null) => {
+$('.filter-modal-close , .filter-location-back').on('click', function () {
+    $('.filter-location-modal').hide();
+    $('.filter-location-back').hide();
+    $('.filter-location-modal .countries').hide();
+    $('.filter-location-modal .cities').hide();
+    $('.filter-location-modal .districts').hide();
+    $('.filter-location-modal .neighborhoods').hide();
+    $('.filter-location-modal .village').hide();
+});
+
+
+function SelectOnClick() {
+
+    $(".filter-location-body input[type='checkbox']").unbind();
+    searchLocationName()
+    $('.loading').hide();
+
+    return $(".filter-location-body input[type='checkbox']").change(function () {
+        resetValue($(this).attr('data-field'), false, true)
+        var input = $('input[name="' + $(this).attr('data-field') + '"]');
+        var input_val = input.val()
+        var input_name = $('.selected-'+$(this).attr('data-field')+' small').html("")
+        var id = $(this).attr('data-id');
+        var name = $(this).attr('data-id');
+        if (input_val != "") {
+            input_val = input_val.split(',');
+        } else {
+            input_val = [];
+        }
+        if (this.checked) {
+            input_val.push(id);
+        } else {
+            input_val.splice($.inArray(id, input_val), 1);
+        }
+        input.val(input_val.join(','))
+        $('.selected-'+$(this).attr('data-field')+' small').html("")
+    });
+}
+
+
+function crud(params, url, type, beforeSend, callback) {
     $.ajax({
-        type: 'get',
-        url: '/getlocations',
-        data: {
-            id: id,
-            table: table,
-            typeDb: typeDb,
+        type: type,
+        data: params,
+        url: url,
+        beforeSend: function () {
+            beforeSend
         },
         success: function (response) {
-            setLocations(response, id, table, typeDb, divId, paramName);
-            return response;
+            callback(response);
         },
-        error: function (err) {
-            reject(Error("It broke"));
-        }
     });
-};
+}
 
+function item(field_name, id, value) {
+    return '<li class="px-2" data-id="' + id + '">\n' +
+        '                    <label class="w-100">\n' +
+        '                        <input type="checkbox" data-field="' + field_name + '" data-id="' + id + '">\n' +
+        '                        <small>' + value + '</small>\n' +
+        '                    </label>\n' +
+        '                </li>';
+}
 
-setLocations = (response, id, table, typeDb, divId, paramName) => {
+function resetValue(location_type, reset_this, reset_parent) {
+    var list_class, inputs;
+    var selected_type = false;
+
+    //For City
+    if (location_type == "country") {
+        inputs = ['city', 'district', 'neighborhood', 'village']
+        list_class = ['cities', 'districts', 'neighborhoods', 'village']
+        selected_type = true
 
-    //Add Options
-    if(divId != ".cities")
-    {
-        $(divId).append("<option value></option>")
     }
-    response.forEach(function (options) {
-        $(divId).append("<option value=" + options.id + ">" + options.name + "</option>")
-    });
 
-    //Set Selected Option
-    if (paramName != null) {
-        if (divId == ".cities") {
-            $('.countries').val(searchParams.get('country'));
-            $('.countries').select2();
-            $('.cities').val(findParam("city[]"));
+    //For City
+    if (location_type == "city") {
+        if (reset_this || selected_type) {
+            inputs = ['city', 'district', 'neighborhood', 'village']
+            list_class = ['cities', 'districts', 'neighborhoods', 'village']
         } else {
-            $(divId).val(searchParams.get(paramName));
+            location_type = "district";
+            selected_type = true
         }
-        $(divId).select2();
     }
 
-};
+    //For District
+    if (location_type == "district") {
+        if (reset_this || selected_type) {
+            inputs = ['district', 'neighborhood', 'village']
+            list_class = ['districts', 'neighborhoods', 'village']
+        } else {
+            location_type = "neighborhood";
+            selected_type = true
+        }
 
-//Category Change
-$('.countries').on('change', function () {
-    $('.cities').empty();
-    var table = "cities";
-    var typeDb = 'parent_country_id';
-    var id = $(this).val();
-    var divId = ".cities";
-
-    FindLocations(id, table, typeDb, divId);
-});
-
-//City Change
-$('.cities, .select2-selection__choice__remove').on('change', function () {
-    $('.districts').empty();
-    var table = "districts";
-    var typeDb = 'parent_city_id';
-    var id = $(this).val();
-    var divId = ".districts";
-
-    FindLocations(id, table, typeDb, divId);
-});
-
-//Districts Change
-$('.districts').on('change', function () {
-    var table = "neighborhoods";
-    var typeDb = 'parent_district_id';
-    var id = $(this).val();
-    var divId = ".neighborhoods";
-
-    FindLocations(id, table, typeDb, divId);
-});
-
-//Neighborhoods Change
-$('.neighborhoods').on('change', function () {
-    var table = "village";
-    var typeDb = 'parent_neighborhood_id';
-    var id = $(this).val();
-    var divId = ".village";
-
-    FindLocations(id, table, typeDb, divId);
-});
-
-
-jQuery(document).ready(function ($) {
-
-}).promise().done(function () {
-
-    //Get City && Set Country
-    if (searchParams.get('country') != '') {
-        $('.cities').empty();
-        var table = "cities";
-        var typeDb = 'parent_country_id';
-        var id = searchParams.get('country');
-        var divId = ".cities";
-        var paramName = 'city';
-
-        FindLocations(id, table, typeDb, divId, paramName);
     }
 
-}).promise().done(function () {
-
-    //get District  && set city
-    if (findParam('city[]').length) {
-        $('.districts').empty();
-        var table = "districts";
-        var typeDb = 'parent_city_id';
-        var id = findParam('city[]');
-        var divId = ".districts";
-        var paramName = 'district';
-
-        FindLocations(id, table, typeDb, divId, paramName);
+    //For Neighborhood
+    if (location_type == "neighborhood") {
+        if (reset_this || selected_type) {
+            inputs = ['neighborhood', 'village']
+            list_class = ['neighborhoods', 'village']
+        } else {
+            inputs = ['village']
+            list_class = ['village']
+        }
     }
 
-}).promise().done(function () {
+    //Reset All List Class From list_class
+    $.each(list_class, function (index, value) {
+        $('.filter-location-modal .' + value).html("");
+    });
 
-    //get neighborhood  && set districts
-    if (searchParams.get('district') != '') {
-        $('.neighborhoods').empty();
-        var table = "neighborhoods";
-        var typeDb = 'parent_district_id';
-        var id = searchParams.get('district');
-        var divId = ".neighborhoods";
-        var paramName = 'neighborhood';
+    //Reset All Input Value From inputs
+    $.each(inputs, function (index, value) {
+        $('input[name="' + value + '"]').val("");
+        if (reset_parent)
+            $('.filter-' + value + '-btn').attr("data-parent", "");
+    });
+}
 
-        FindLocations(id, table, typeDb, divId, paramName);
-    }
+function scroolToModal() {
+    //Scrool Screen
+    $([document.documentElement, document.body]).animate({
+        scrollTop: $('.filter-location-modal').offset().top - 250
+    }, 1000);
+}
 
-}).promise().done(function () {
+function searchLocationName() {
+    $("#searchLocation").unbind();
+    $("#searchLocation").on("keyup", function () {
+        var value = this.value.toLowerCase().trim();
+        $('.filter-location-modal li').show().filter(function () {
+            return $(this).text().toLowerCase().trim().indexOf(value) == -1;
+        }).hide();
+    });
+}
 
-    //get village  && set neighborhoods
-    if (searchParams.get('neighborhood') != '') {
-        $('.village').empty();
-        var table = "village";
-        var typeDb = 'parent_neighborhood_id';
-        var id = searchParams.get('neighborhood');
-        var divId = ".village";
-        var paramName = 'village';
-
-        FindLocations(id, table, typeDb, divId, paramName);
-    }
-
-});
+function beforeSend() {
+    $('.loading').show()
+    $('.filter-location-modal li').show();
+    $("#searchLocation").val('');
+}

addons/default/visiosoft/location-module/resources/lang/en/message.php

@@ -1,4 +1,6 @@
 <?php
 
 return [
+    'placeholder' => 'Type here to search',
+    'null_msg' => 'Not Found',
 ];

addons/default/visiosoft/location-module/resources/lang/tr/addon.php

@@ -1,7 +1,7 @@
 <?php
 
  return[
-   "title"   =>"Yer",
-   "name"   =>"Yer Modülü",
-   "description"   =>"Açıklama"
+   "title"   =>"Bölge",
+   "name"   =>"Bölge Modülü",
+   "description"   =>"Bölge Modülü"
 ];

addons/default/visiosoft/location-module/resources/lang/tr/button.php

@@ -2,8 +2,8 @@
 
  return[
    "new_country"   =>"Yeni ülke",
-   "new_city"   =>"Yeni şehir",
-   "new_district"   =>"Yeni bölge",
+   "new_city"   =>"Yeni İl",
+   "new_district"   =>"Yeni İlçe",
    "new_neighborhood"   =>"Yeni mahalle",
    "new_village"   =>"Yeni köy",
    "sub_cities"   =>"Alt Şehirler",

addons/default/visiosoft/location-module/resources/lang/tr/field.php

@@ -10,11 +10,11 @@ return[
 
     ],
     "city"   =>   [
-        "name"      =>"Kent",
+        "name"      =>"İl",
 
     ],
     "country"   =>   [
-        "name"      =>"ülke",
+        "name"      =>"Ülke",
 
     ],
     "district"   =>   [
@@ -22,15 +22,15 @@ return[
 
     ],
     "order"   =>   [
-        "name"      =>"Sıralama düzeni",
+        "name"      =>"Sıralama",
 
     ],
     "neighborhood"   =>   [
-        "name"      =>"Komşuluk",
+        "name"      =>"Mahalle",
 
     ],
     "village"   =>   [
-        "name"      =>"köy",
+        "name"      =>"Köy",
 
     ],
     "description"   =>   [

addons/default/visiosoft/location-module/resources/lang/tr/message.php

@@ -1,5 +1,6 @@
 <?php
 
- return[
-
-];
+return [
+    'placeholder' => 'Ara',
+    'null_msg' => 'Bulunamadı',
+];

addons/default/visiosoft/location-module/resources/lang/tr/permission.php

@@ -1,15 +0,0 @@
-<?php
-
- return[
-   "village"   =>   [
-      "name"      =>"köy",
-      "option"      =>      [
-         "read"         =>"Köy okuyabilir mi        ",
-         "write"         =>"Köy oluşturabilir / düzenleyebilir mi?        ",
-         "delete"         =>"Köyü silebilir mi?",
-
-      ],
-
-   ],
-
-];

addons/default/visiosoft/location-module/resources/lang/tr/section.php

@@ -2,19 +2,19 @@
 
  return[
    "countries"   =>   [
-      "title"      =>"Ülkeler",
+      "title"      =>"Ülke",
 
    ],
    "cities"   =>   [
-      "title"      =>"Şehirler",
+      "title"      =>"İl",
 
    ],
    "districts"   =>   [
-      "title"      =>"İlçeler",
+      "title"      =>"İlçer",
 
    ],
    "neighborhoods"   =>   [
-      "title"      =>"Çevredekiler",
+      "title"      =>"Mahalle",
 
    ],
    "village"   =>   [

addons/default/visiosoft/location-module/resources/views/ads-list/partials/location-fields.twig

@@ -1,42 +1,123 @@
+{#<div class="row w-100 px-2 m-0">#}
+{#    <div class="col-12 px-0 py-1">#}
+{#        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.country.name") }}</label>#}
+{#        <select class="form-control countries" name="country" id="countries">#}
+{#            {% for country in params.countries %}#}
+{#                <option value="{{ country.id }}">{{ country.name }}</option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </div>#}
+{#    <div class="col-12 px-0 py-1">#}
+{#        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.city.name") }}</label>#}
+{#        <select class="form-control cities" name="city[]" id="cities" multiple>#}
+{#            {% for city in params.cities %}#}
+{#                <option value="{{ city.id }}">{{ city.name }}</option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </div>#}
+{#    <div class="col-12 px-0 py-1">#}
+{#        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.district.name") }}</label>#}
+{#        <select class="form-control districts" name="district" id="districts">#}
+{#            {% for district in params.districts %}#}
+{#                <option value="{{ district.id }}">{{ district.name }}</option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </div>#}
+{#    <div class="col-12 px-0 py-1">#}
+{#        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</label>#}
+{#        <select class="form-control neighborhoods" name="neighborhood" id="neighborhoods">#}
+{#            {% for neighborhood in params.neighborhoods %}#}
+{#                <option value="{{ neighborhood.id }}">{{ neighborhood.name }}</option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </div>#}
+{#    <div class="col-12 px-0 py-1">#}
+{#        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.village.name") }}</label>#}
+{#        <select class="form-control village" name="village" id="village">#}
+{#            {% for village in params.villages %}#}
+{#                <option value="{{ village.id }}">{{ village.name }}</option>#}
+{#            {% endfor %}#}
+{#        </select>#}
+{#    </div>#}
+{#</div>#}
+
+
 <div class="row w-100 px-2 m-0">
     <div class="col-12 px-0 py-1">
-        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.country.name") }}</label>
-        <select class="form-control countries" name="country" id="countries">
-            {% for country in params.countries %}
-                <option value="{{ country.id }}">{{ country.name }}</option>
-            {% endfor %}
-        </select>
+        <button type="button" class="btn btn-default border border-1 w-100 filter-country-btn" data-toggle="modal">
+            <span class="float-left">{{ trans("visiosoft.module.location::field.country.name") }}</span>
+            <i class="fas fa-sort-down float-right"></i>
+        </button>
+        <div class="text-muted selected-country">
+            <small></small>
+        </div>
+        <input name="country" type="hidden">
     </div>
     <div class="col-12 px-0 py-1">
-        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.city.name") }}</label>
-        <select class="form-control cities" name="city[]" id="cities" multiple>
-            {% for city in params.cities %}
-                <option value="{{ city.id }}">{{ city.name }}</option>
-            {% endfor %}
-        </select>
+        <button type="button" class="btn btn-default border border-1 w-100 filter-city-btn" data-toggle="modal"
+                data-parent="">
+            <span class="float-left">{{ trans("visiosoft.module.location::field.city.name") }}</span>
+            <i class="fas fa-sort-down float-right"></i>
+        </button>
+        <div class="text-muted selected-city">
+            <small></small>
+        </div>
+        <input name="city" type="hidden">
     </div>
     <div class="col-12 px-0 py-1">
-        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.district.name") }}</label>
-        <select class="form-control districts" name="district" id="districts">
-            {% for district in params.districts %}
-                <option value="{{ district.id }}">{{ district.name }}</option>
-            {% endfor %}
-        </select>
+        <button type="button" class="btn btn-default border border-1 w-100 filter-district-btn" data-toggle="modal"
+                data-parent="">
+            <span class="float-left">{{ trans("visiosoft.module.location::field.district.name") }}</span>
+            <i class="fas fa-sort-down float-right"></i>
+        </button>
+        <div class="text-muted selected-district">
+            <small></small>
+        </div>
+        <input name="district" type="hidden">
     </div>
     <div class="col-12 px-0 py-1">
-        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</label>
-        <select class="form-control neighborhoods" name="neighborhood" id="neighborhoods">
-            {% for neighborhood in params.neighborhoods %}
-                <option value="{{ neighborhood.id }}">{{ neighborhood.name }}</option>
-            {% endfor %}
-        </select>
+        <button type="button" class="btn btn-default border border-1 w-100 filter-neighborhood-btn" data-toggle="modal"
+                data-parent="">
+            <span class="float-left">{{ trans("visiosoft.module.location::field.neighborhood.name") }}</span>
+            <i class="fas fa-sort-down float-right"></i>
+        </button>
+        <div class="text-muted selected-neighborhood">
+            <small></small>
+        </div>
+        <input name="neighborhood" type="hidden">
     </div>
     <div class="col-12 px-0 py-1">
-        <label class="label-filter-location">{{ trans("visiosoft.module.location::field.village.name") }}</label>
-        <select class="form-control village" name="village" id="village">
-            {% for village in params.villages %}
-                <option value="{{ village.id }}">{{ village.name }}</option>
-            {% endfor %}
-        </select>
+        <button type="button" class="btn btn-default border border-1 w-100 filter-village-btn" data-toggle="modal"
+                data-parent="">
+            <span class="float-left">{{ trans("visiosoft.module.location::field.village.name") }}</span>
+            <i class="fas fa-sort-down float-right"></i>
+        </button>
+        <div class="text-muted selected-village">
+            <small></small>
+        </div>
+        <input name="village" type="hidden">
     </div>
-</div>
+</div>
+
+<div class="modal-content position-absolute filter-location-modal" style="z-index: 9999;display: none">
+    <div class="modal-header">
+        <input type="text" id="searchLocation" class="form-control"
+               placeholder="{{ trans('visiosoft.module.location::message.placeholder') }}">
+        <button type="button" class="close filter-modal-close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body filter-location-body">
+        <div class="loading"></div>
+        <ul class="list-unstyled countries" style="height: 200px; overflow: auto;display: none"></ul>
+        <ul class="list-unstyled cities" style="height: 200px; overflow: auto;display: none"></ul>
+        <ul class="list-unstyled districts" style="height: 200px; overflow: auto;display: none"></ul>
+        <ul class="list-unstyled neighborhoods" style="height: 200px; overflow: auto;display: none"></ul>
+        <ul class="list-unstyled village" style="height: 200px; overflow: auto;display: none"></ul>
+    </div>
+</div>
+<div class="filter-location-back" style="display: none"></div>
+
+<script>
+    var null_msg = "{{ trans('visiosoft.module.location::message.null_msg') }}!"
+</script>

addons/default/visiosoft/location-module/src/Http/Controller/AjaxController.php

@@ -0,0 +1,106 @@
+<?php namespace Visiosoft\LocationModule\Http\Controller;
+
+use Anomaly\Streams\Platform\Http\Controller\PublicController;
+use Visiosoft\LocationModule\City\CityModel;
+use Visiosoft\LocationModule\Country\CountryModel;
+use Visiosoft\LocationModule\District\DistrictModel;
+use Visiosoft\LocationModule\Neighborhood\NeighborhoodModel;
+use Visiosoft\LocationModule\Village\VillageModel;
+
+class AjaxController extends PublicController
+{
+    /**
+     * @var CountryModel
+     */
+    private $country_model;
+    /**
+     * @var CityModel
+     */
+    private $city_model;
+    /**
+     * @var DistrictModel
+     */
+    private $district_model;
+    /**
+     * @var NeighborhoodModel
+     */
+    private $neighborhood_model;
+    /**
+     * @var VillageModel
+     */
+    private $village_model;
+
+    /**
+     * AjaxController constructor.
+     * @param CountryModel $countryModel
+     */
+    public function __construct(
+        CountryModel $countryModel,
+        CityModel $cityModel,
+        DistrictModel $districtModel,
+        NeighborhoodModel $neighborhoodModel,
+        VillageModel $villageModel)
+    {
+        $this->country_model = $countryModel;
+        $this->city_model = $cityModel;
+        $this->district_model = $districtModel;
+        $this->neighborhood_model = $neighborhoodModel;
+        $this->village_model = $villageModel;
+        parent::__construct();
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getCountries()
+    {
+        if ($this->request->id)
+            return $this->country_model->find($this->request->id);
+        else
+            return $this->country_model->get();
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getCities()
+    {
+        if ($this->request->id) {
+            $id = explode(',', $this->request->id);
+            return $this->city_model->whereIn('parent_country_id', $id)->get();
+        }
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getDistricts()
+    {
+        if ($this->request->id) {
+            $id = explode(',', $this->request->id);
+            return $this->district_model->whereIn('parent_city_id', $id)->get();
+        }
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getNeighborhoods()
+    {
+        if ($this->request->id) {
+            $id = explode(',', $this->request->id);
+            return $this->neighborhood_model->whereIn('parent_district_id', $id)->get();
+        }
+    }
+
+    /**
+     * @return mixed
+     */
+    public function getVillage()
+    {
+        if ($this->request->id) {
+            $id = explode(',', $this->request->id);
+            return $this->village_model->whereIn('parent_neighborhood_id', $id)->get();
+        }
+    }
+}

addons/default/visiosoft/location-module/src/LocationModuleServiceProvider.php

@@ -75,6 +75,27 @@ class LocationModuleServiceProvider extends AddonServiceProvider
         'admin/location/neighborhoods' => 'Visiosoft\LocationModule\Http\Controller\Admin\NeighborhoodsController@index',
         'admin/location/neighborhoods/create' => 'Visiosoft\LocationModule\Http\Controller\Admin\NeighborhoodsController@create',
         'admin/location/neighborhoods/edit/{id}' => 'Visiosoft\LocationModule\Http\Controller\Admin\NeighborhoodsController@edit',
+
+        'ajax/getCountry' => [
+            'as' => 'location::getCountry',
+            'uses' => 'Visiosoft\LocationModule\Http\Controller\AjaxController@getCountries'
+        ],
+        'ajax/getCities' => [
+            'as' => 'location::getCities',
+            'uses' => 'Visiosoft\LocationModule\Http\Controller\AjaxController@getCities'
+        ],
+        'ajax/getDistricts' => [
+            'as' => 'location::getDistricts',
+            'uses' => 'Visiosoft\LocationModule\Http\Controller\AjaxController@getDistricts'
+        ],
+        'ajax/getNeighborhoods' => [
+            'as' => 'location::getNeighborhoods',
+            'uses' => 'Visiosoft\LocationModule\Http\Controller\AjaxController@getNeighborhoods'
+        ],
+        'ajax/getVillage' => [
+            'as' => 'location::getVillage',
+            'uses' => 'Visiosoft\LocationModule\Http\Controller\AjaxController@getVillage'
+        ],
     ];
 
     /**