@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">Unauthorized People</h4>

                    {{-- <div class="row mb-3">
                        <div class="col-md-2">
                            <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-2">
                            <select id="panchayathFilter" class="form-control">
                                <option value="">All Panchayaths</option>
                                @foreach($panchayats as $panchayath)
                                <option value="{{ $panchayath->id }}">{{ $panchayath->place }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <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-2">
                            <select id="genderFilter" class="form-control">
                                <option value="">All Genders</option>
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="ageFilter" class="form-control">
                                <option value="">All Ages</option>
                                @for($i = 1; $i <= 100; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="religionFilter" class="form-control">
                                <option value="">All Religions</option>
                                @foreach($religions as $religion)
                                <option value="{{ $religion->id }}">{{ $religion->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2 mt-3">
                            <select id="casteFilter" class="form-control">
                                <option value="">All Castes</option>
                                @foreach($castes as $caste)
                                <option value="{{ $caste->id }}">{{ $caste->name }}</option>
                                @endforeach
                            </select>
                        </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": "people-240426104123" }'
                            data-query-params="PeopleQueryParams"
                            data-click-to-select="true"
                            data-toolbar="#toolbar"
                            data-url="{{ route('unauthorizeduser.data') }}"
                            class="table table-bordered table-striped verticle-middle table-responsive-sm"
                            id="peopleTable"
                        >
                            <thead>
                                <tr class="bg-primary text-white">
                                    <th data-field="index" data-sortable="true">#</th>
                                    <th data-field="first_name" data-sortable="true">First Name</th>
                                    <th data-field="last_name" data-sortable="true">Last Name</th>
                                    <th data-field="middle_name" data-sortable="true">Middle Name</th>
                                    <th data-field="designation" data-sortable="true">Designation</th>
                                    <th data-field="email" data-sortable="true">Email</th>
                                    <th data-field="phone" data-sortable="true">Phone</th>
                                    <th data-field="contact_number" data-sortable="true">Contact Number</th>
                                    <th data-field="aadhar_no" data-sortable="true">Aadhar No</th>
                                    <th data-field="address" data-sortable="true">Address</th>
                                    <th data-field="city" data-sortable="true">City</th>
                                    <th data-field="country" data-sortable="true">Country</th>
                                    <th data-field="date_of_birth" data-sortable="true">Date of Birth</th>
                                    <th data-field="age" data-sortable="true">Age</th>
                                    <th data-field="gender" data-sortable="true">Gender</th>
                                    <th data-field="image" data-sortable="true" data-visible="false">Image</th>
                                    <th data-field="parent_name" data-sortable="true">Parent Name</th>
                                    <th data-field="parent_age" data-sortable="true">Parent Age</th>
                                    <th data-field="parent_designation" data-sortable="true">Parent Designation</th>
                                    <th data-field="parent_number" data-sortable="true">Parent Phone</th>
                                    <th data-field="parent_role" data-sortable="true">Parent Role</th>
                                    <th data-field="parent_aadhar_no" data-sortable="true">Parent Aadhar No</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="district" data-sortable="true">District</th>
                                    <th data-field="state" data-sortable="true">State</th>
                                    <th data-field="religion" data-sortable="true">Religion</th>
                                    <th data-field="caste" data-sortable="true">Caste</th>
                                    <th data-field="qualification" data-sortable="true">Qualification</th>
                                    <th data-field="job_sector" data-sortable="true">Job Sector</th>
                                    <th data-field="sub_district" data-sortable="true">Sub District</th>
                                    <th data-field="operate" data-escape="false">Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": true,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>

<script>
    $(document).ready(function() {
        $('#peopleTable').bootstrapTable();
        $('#addPersonForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('people.store') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#addPersonModal').modal('hide');
                    $('#peopleTable').bootstrapTable('refresh');
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        });

        $('#districtFilter').change(function() {
            $('#peopleTable').bootstrapTable('refreshOptions', {
                queryParams: function(params) {
                    params.district_id = $('#districtFilter').val();
                    return params;
                }
            });
        });

    });
</script>

<script>
    function approveUser(userId) {
    if (confirm('Are you sure you want to approve this user?')) {
        $.ajax({
            url: '/unauthorizeduser/' + userId + '/approve',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    toastr.success('User Approved.');
                    $('#peopleTable').bootstrapTable('refresh');
                } else {
                    toastr.error('Error: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                toastr.error('An error occurred while approving the user.');
            }
        });
    }
}

    function deleteUnauthorizedUser(userId) {
        if (confirm('Are you sure you want to delete this user?')) {
            $.ajax({
                url: '/unauthorizeduser/' + userId + '/delete',
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success('User Deleted Sucessfully .');
                        $('#peopleTable').bootstrapTable('refresh');
                    } else {
                        toastr.error('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred while deleting the user.');
                }
            });
        }
    }

</script>


@endsection