@extends('layout.default')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">{{ $page_title }}</h4>
                    <a href="{{ route('wardmembers.create') }}" class="btn btn-primary mb-3">Create Ward Member</a>

                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <select id="districtFilter" class="form-control">
                                <option value="">All Districts</option>
                                @foreach($districts as $district)
                                <option value="{{ $district->id }}">{{ $district->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="panchayathFilter" class="form-control">
                                <option value="">All Panchayaths</option>
                                @foreach($panchayaths as $panchayath)
                                <option value="{{ $panchayath->id }}">{{ $panchayath->place }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="wardFilter" class="form-control">
                                <option value="">All Wards</option>
                                @foreach($wards as $ward)
                                <option value="{{ $ward->id }}">{{ $ward->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <input type="text" id="search" class="form-control" placeholder="Search">
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table data-toggle="table" data-pagination="true" data-side-pagination="server"
                            data-toolbar-align="right" data-page-list="[10, 25, 50, 100, 200, All]"
                            data-mobile-responsive="true" data-sort-name="id" data-sort-order="desc" data-search="true"
                            data-export-types="['excel','pdf']" data-export-data-type='all' data-show-export="true"
                            data-export-options='{ "fileName": "ward-members-240426012641" }'
                            data-query-params="WardMemberQueryParams" data-click-to-select="true" data-toolbar="#toolbar"
                            data-url="{{ route('wardmembers.getWardMembers') }}"
                            class="table table-bordered table-striped verticle-middle table-responsive-sm"
                            id="wardMembersTable">
                            <thead>
                                <tr class="bg-primary text-white">
                                    <th data-field="index" data-sortable="true">#</th>
                                    <th data-field="name" data-sortable="true">Name</th>
                                    <th data-field="email" data-sortable="true">Email</th>
                                    <th data-field="mobile" data-sortable="true">Mobile</th>
                                    <th data-field="address" data-sortable="true">Address</th>
                                    <th data-field="city" data-sortable="true">City</th>
                                    <th data-field="state" data-sortable="true">State</th>
                                    <th data-field="district" data-sortable="true">District</th>
                                    <th data-field="sub_district" data-sortable="true">Sub District</th>
                                    <th data-field="panchayath" data-sortable="true">Panchayath</th>
                                    <th data-field="panchayat_type" data-sortable="true">Panchayat Type</th>
                                    <th data-field="ward" data-sortable="true">Ward</th>
                                    <th data-field="operate" data-escape="false">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#search').on('keyup', function() {
        $('#wardMembersTable').bootstrapTable('refresh');
    });

    $('#districtFilter, #panchayathFilter, #wardFilter').on('change', function() {
        $('#wardMembersTable').bootstrapTable('refresh');
    });
});
</script>
<script>
    function deleteUser(userId) {
        if (confirm('Are you sure you want to delete this ward member?')) {
            $.ajax({
                url: '/wardmembers/' + userId,  
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'  
                },
                success: function(response) {
                    // alert('Ward member deleted successfully.');
                    $('#wardMembersTable').bootstrapTable('refresh');  
                },
                error: function(xhr) {
                    alert('An error occurred while deleting the ward member.');
                }
            });
        }
    }
    </script>
    
@endsection