
    <div id="filter-panel" class="collapse filter-panel mb-4">
    <div class="panel panel-default bg-light p-3">
        <div class="panel-body">
        <label class="control-label" for="pref-search">  Sort By:</label>
         <form id="groups-filter-form" class="form" role="form">
                <div class="row">
               
                <div class="form-group col-xs-4 col-md-3">
                        <label class="control-label" for="pref-search"> Contact</label>
                        <input type="text" class="form-control" name="contact" id="filter-end-date">
                    </div>
                    <div class="form-group col-xs-4 col-md-3">
                        <label class="control-label" for="pref-search"> Group</label>
                        <select class="select2 form-control" name="group">
                        <option value="">Select Group</option>
                        @foreach($groups as $group)
                        <option value="{{$group->group_id}}">{{$group->name}}</option>
                        @endforeach
                        </select>
                    </div>

                    <div class="form-group col-xs-4 col-md-3">
                        <label class="control-label" for="pref-perpage">Dates:   From:</label>
                        <input type="date" class="form-control input-sm" name="start_date" id="filter-start-date">
                    </div>
                    <div class="form-group col-xs-4 col-md-3">
                        <label class="control-label" for="pref-search"> To</label>
                        <input type="date" class="form-control" name="end_date" id="filter-end-date">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <button type="submit" id="filter-submit" class="btn btn-primary btn-round btn-sm">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <button type="reset" class="btn btn-primary btn-round btn-border btn-sm">Clear</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

