How to filter data from database using two input box in Laravel

I just followed a YouTube tutorial where the tutor did something similar to what i wanted Tutorial Link : Laravel 5.8 - Custom Search in Datatables using Ajax

And in the tutorial the tutor uses Datatable to load all the data and also to show all the filtered results.

I need to have my own custom desigh where i can add a @foreach and customize the design, i don't know how can i do it i tried many way and i failed.

Can someone suggest me a solution for it or suggest me any tutorials to be followed where i can make the filtered data load into my view as i wanted.

Here's my stores.blade.php where the search fields and the table is,

     <h3 align="center">Store Locator</h3>
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="form-group">
                    <select name="filter_district" id="filter_district" class="form-control" required>
                        <option value="">Select Distric</option>
                        @foreach ($district_name as $district)
                             <option value=""></option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <select name="filter_outlet" id="filter_outlet" class="form-control" required>
                       <option value="">Select Outlet</option>
                        @foreach($outlet_name as $country)
                            <option value=""></option>
                        @endforeach
                    </select>
                </div>
                
                <div class="form-group" align="center">
                    <button type="button" name="filter" id="filter" class="btn form-submit">Filter</button>

                    <button type="button" name="reset" id="reset" class="btn form-submit">Reset</button>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
        <br />
        <div class="table-responsive">
            <table id="store_data" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Outlet</th>
                        <th>Province</th>
                        <th>District</th>
                        <th>Number 1</th>
                        <th>Number 2</th>
                        <th>Number 3</th>
                        <th>Address</th>
                    </tr>
                </thead>
            </table>
        </div>

Here's the Script in the stores.blade.php

    <script>
$(document).ready(function(){
    fill_datatable();
    function fill_datatable(filter_district = '', filter_outlet = '')
    {
        var dataTable = $('#store_data').DataTable({
            processing: true,
            serverSide: true,
            ajax:{
                url: "",
                data:{filter_district:filter_district, filter_outlet:filter_outlet}
            },
            columns: [
                {
                    data:'id',
                    name:'id'
                },
                {
                    data:'outlet',
                    name:'outlet'
                },
                {
                    data:'province',
                    name:'province'
                },
                {
                    data:'district',
                    name:'district'
                },
                {
                    data:'no1',
                    "render": function(data, type, row, meta) {
                        if (type === 'display') {
                        data = '<a class="gray" href="tel:' + data + '">' + data + '</a>';
                        }
                        return data;
                    },
                    name:'no1'
                },
                {
                    data:'no2',
                    "render": function(data, type, row, meta) {
                        if (type === 'display') {
                        data = '<a class="gray" href="tel:' + data + '">' + data + '</a>';
                        }
                        return data;
                    },
                    name:'no2'
                },
                {
                    data:'no3',
                    "render": function(data, type, row, meta) {
                        if (type === 'display') {
                        data = '<a class="gray" href="tel:' + data + '">' + data + '</a>';
                        }
                        return data;
                    },
                    name:'no3'
                },
                {
                    data:'address',
                    name:'address'
                }
            ]
        });
    }

    // $('#filter_outlet').on('change',function(){
    $('#filter').click(function(){
        var filter_district = $('#filter_district').val();
        var filter_outlet = $('#filter_outlet').val();

        if(filter_district != '' &&  filter_district != '')
        {
            $('#store_data').DataTable().destroy();
            fill_datatable(filter_district, filter_outlet);
        }
        else
        {
            alert('Select Both filter option');
        }
    });

    $('#reset').click(function(){
        $('#filter_district').val('');
        $('#filter_outlet').val('');
        $('#store_data').DataTable().destroy();
        fill_datatable();
    });

});
</script>

Here's my model

    <?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Store extends Model
{
    protected $table = 'stores';
}

Here's my StoreLocatorController.php

    <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Store;


class StoreLocatorController extends Controller
{
      function index(Request $request)
    {
     if(request()->ajax())
     {
      if(!empty($request->filter_district))
      {
       $data = Store::select('id','outlet', 'province', 'district', 'no1', 'no2', 'no3', 'address')
         ->where('district', $request->filter_district)
         ->where('outlet', $request->filter_outlet)
         ->get();
      }
      else
      {
       $data = Store::select('id','outlet', 'province', 'district', 'no1', 'no2', 'no3', 'address')
        ->get();
      }
      return datatables()->of($data)->make(true);
     }
     $outlet_name = Store::select('outlet')
          ->groupBy('outlet')
          ->orderBy('outlet', 'ASC')
          ->get();

    $district_name = Store::select('district')
        ->groupBy('district')
          ->orderBy('district', 'ASC')
          ->get();
     return view('test.stores', compact('outlet_name','district_name'));


      // $count = Store::orderBy('id')->where('district','Kandy')->count();
        // $store = Store::orderBy('id','asc')->get();
        // return view("test.stores")->with('store',$store)->with('count',$count);
        // return view("test.stores");
    }

    
}

Here's my web routes

Route::resource('/store-locatorr', 'StoreLocatorController');

This is my database

This is how my ui looks like

I just wanted to know a way how can i display the results which loaded in the table from database to be loaded into a foreach so that i can design the way i wanted, while the search functionality works as it is, Can someone help me out or please suggest me something where i can clear this issue,

via Chebli Mohamed