@extends('layout.default')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0 pb-0 d-sm-flex d-block">
                    <div>
                        <h4 class="card-title mb-1">Ward List</h4>
                    </div>
                </div>
                <div class="card-body">
                    <a href="{{ route('wards.create') }}" class="btn btn-primary">Add Ward</a>
                    <div class="col-lg-12">
                        <table data-toggle="table" data-pagination="true" data-side-pagination="server"
                            data-page-list="[10, 25, 50, 100, 200, All]" data-trim-on-search="false"
                            data-mobile-responsive="true" data-sort-name="id" data-sort-order="desc"
                            data-export-types="['excel','pdf']" data-export-data-type='all' data-show-export="true"
                            data-export-options='{ "fileName": "wards-list-230426080248" }'
                            data-query-params="WardQueryParams" data-click-to-select="true" data-toolbar="#toolbar"
                            aria-describedby="mydesc"
                            class="table table-bordered table-striped verticle-middle table-responsive-sm"
                            data-search="true" data-url="{{ route('wards.list') }}" id='table_list'>
                            <thead>
                                <tr class="bg-primary">
                                    <th scope="col" data-field="serial" data-sortable="false">S.No.</th>
                                    <th scope="col" data-field="name" data-sortable="true">{{ __('Name') }}</th>
                                    <th scope="col" data-field="district_name" data-sortable="true">
                                        {{ __('District Name') }}</th>
                                    <th scope="col" data-field="sub_districts_name" data-sortable="true">
                                        {{ __('Sub-district Name') }}</th>
                                    <th scope="col" data-field="panchayat_type_name" data-sortable="true">
                                        {{ __('Panchayat Type') }}</th>
                                    <th scope="col" data-field="panchayat_name" data-sortable="true">
                                        {{ __('Panchayat Name') }}</th>
                                    <th scope="col" data-field="operate" data-sortable="false">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function WardQueryParams(p) {
    return {
        limit: p.limit,
        sort: p.sort,
        order: p.order,
        offset: p.offset,
        page: Math.ceil(p.offset / p.limit) + 1, 
        search: p.search,
        district_id: $('#district_id').val(),
        panchayat_type_id: $('#panchayat_type_id').val(),
        panchayat_id: $('#panchayat_id').val()
    };
}
</script>
@endsection