@include('layouts.header_script')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-title text-white card_1 justify-content-between d-flex">
                    <h6>
                        {{ $posting_type == 3 ? __('msg.party_list') : ($posting_type == 1 ? __('msg.customer_list') : __('msg.vendor_list')) }}
                    </h6>
                </div>
                <div class="card-body pb-2">
                    <div class="row mt-2">
                        <div class="col-2">
                            <select name="" class="form-control select_2" id="type" onchange="typeChange()">
                                <option value="">{{__('msg.all')}}</option>
                                @if(in_array($posting_type, [1,3]))
                                    <option {{ $posting_type == 1 ? 'selected' : '' }} value="1">{{__('msg.customer')}}</option>
                                @endif
                                @if(in_array($posting_type, [2,3]))
                                    <option {{ $posting_type == 2 ? 'selected' : '' }} value="2">{{__('msg.vendor')}}</option>
                                @endif
                                <option value="3">{{__('msg.both')}}</option>
                            </select>
                        </div>
                        <div class="col-2">
                            <select name="group_id" id="group_id" class="form-control"></select>
                        </div>
                        <div class="col-2">
                            <input type="text" name="code" class="form-control" id="code" placeholder="Code">
                        </div>
                        <div class="col-2">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Name">
                        </div>
                        <div class="col-2">
                            <input type="text" name="mobile" class="form-control" id="mobile" placeholder="Mobile">
                        </div>
                        <div class="col-1">
                            <select name="status" id="status" class="form-control">
                                <option value="">{{__('msg.all')}}</option>
                                <option value="1" selected>{{__('msg.active')}}</option>
                                <option value="2">{{__('msg.inactive')}}</option>
                            </select>
                        </div>
                        <div class="col-1">
                            <label for="" class="d-block"></label>
                            <button class="btn btn-sm w-100 btn-success" onclick="getData()">{{__('msg.filter')}}</button>
                        </div>
                    </div>
                    <div class="card-body commonListBody mt-2">

                    </div>
                    <div class="commonListPaginate"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('layouts.footer_script')
<script>
    let groups = @json($groups);
    let filter_route = @json(route(request()->route()->getName()));
    $(document).ready(function() {
        getData();
        typeChange();
    });
    function typeChange() {
        let type = $('#type').val();
        let group_html = '<option value="">Select Group</option>';
        groups.filter((group) => group.type == type).map((group) => {
            group_html += `<option value="${group.id}">${group.name}</option>`;
        })
        $('#group_id').html(group_html);
        $('#group_id').select2();
    }

    function getData() {
        getLoader();
        type = $('#type').val();
        let data = {
            code: $('#code').val(),
            type,
            name: $('#name').val(),
            mobile: $('#mobile').val(),
            group_id: $('#group_id').val(),
            status: $('#status').val(),
        };

        console.log();
        customAjaxCall(function(res) {
            console.log("res", res);
            $('.commonListBody').html(res.body);
            $('.commonListPaginate').html(res.paginate);
        }, 'GET', filter_route, data);
    }
</script>