
<div id="filter-panel" class="collapse filter-panel mb-2">
    <div class="panel panel-default bg-light p-3">
        <div class="panel-body">
            <form id="groups-filter-form" action="{{ route('payments.index')}}" method="get" class="form" role="form">
                <div class="row">
                    <div class="form-group col-xs-3 col-md-3">
                        <label class="control-label" for="filter-phone">Contact Phone</label>
                        <input type="text" name="phone" id="filter-phone" class="form-control">
                    </div>
                    <div class="form-group col-xs-3 col-md-3">
                        <label class="control-label" for="filter-group">Group</label>
                        <select name="group" id="filter-group" class="form-control">
                            <option value="">All</option>
                            @foreach($mygroups as $mygroup)
                                <option value="{{ $mygroup->cust_group_id }}">{{ $mygroup->cust_group_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group col-xs-3 col-md-3">
                        <label class="control-label" for="filter-batch">Batch</label>
                        <select name="batch" id="filter-batch" class="form-control">
                            <option value="">All</option>
                            @foreach($batches as $batch)
                                <option value="{{ $batch->client_batch_id }}">{{ $batch->client_batch_id }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="form-group col-xs-2 col-md-2">
                        <label class="control-label" for="pref-perpage">Start Date</label>
                        <input type="date" class="form-control input-sm" id="pref-perpage" value="2010-01-01">
                    </div>
                    <div class="form-group col-xs-2 col-md-2">
                        <label class="control-label" for="pref-search">End Date</label>
                        <input type="date" class="form-control input-sm" id="pref-search" value="2018-05-29">
                    </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>

