@extends('layout.default')

@section('content')
<div class="container-fluid">
    <div class="page-titles">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">People</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">All People</a></li>
        </ol>
    </div>
    
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">People</h4>
                    <a href="{{ route('people.create') }}" class="btn btn-primary mb-3">Create Person</a>
                    <a href="{{ route('unauthorizeduser.index') }}" class="btn btn-primary mb-3">Unauthorized User</a>
                    <!-- Filters -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <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-3">
                            <input type="number" id="ageFilter" class="form-control" placeholder="Age">
                        </div>
                        <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="panchayatTypeFilter" class="form-control">
                                <option value="">All Panchayat Types</option>
                                @foreach($panchayat_types as $panchayatType)
                                    <option value="{{ $panchayatType->id }}">{{ $panchayatType->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <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-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">
                            <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-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-170426075955" }'
                            data-query-params="PeopleQueryParams"
                            data-click-to-select="true"
                            data-toolbar="#toolbar"
                            data-url="{{ route('people.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="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="operate" data-escape="false">Actions</th>
                                    <th data-field="status" data-escape="false">Active Status</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function PeopleQueryParams(params) {
    return {
        limit: params.limit,
        offset: params.offset,
        sort: params.sort,
        order: params.order,
        search: params.search,
        gender: $('#genderFilter').val(),
        age: $('#ageFilter').val(),
        district_id: $('#districtFilter').val(),
        panchayat_type_id: $('#panchayatTypeFilter').val(),
        panchayath_id: $('#panchayathFilter').val(),
        ward_id: $('#wardFilter').val(),
        religion_id: $('#religionFilter').val(),
        caste_id: $('#casteFilter').val(),
    };
}

function deletePeople(id) {
    if (confirm('Are you sure you want to delete this person?')) {
        $.ajax({
            url: '/people/' + id,
            type: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(result) {
                $('#peopleTable').bootstrapTable('refresh');
            },
            error: function(xhr) {
                alert('Error: ' + xhr.responseJSON.message);
            }
        });
    }
}

function imageFormatter(value) {
    return value ? `<img src="/images/${value}" alt="Image" class="img-thumbnail" style="max-width: 100px;">` : 'No Image';
}

$(document).ready(function() {
    $('#genderFilter, #districtFilter, #panchayatTypeFilter, #panchayathFilter, #wardFilter, #religionFilter, #casteFilter').change(function() {
        $('#peopleTable').bootstrapTable('refresh');
    });

    $('#ageFilter').on('input', function() {
        $('#peopleTable').bootstrapTable('refresh');
    });
});

$(document).on('change', '.toggle-status', function () {
    const id = $(this).data('id');
    const status = $(this).is(':checked') ? 1 : 0;

    const label = $(this).siblings('.status-label');
    
    // Remove existing classes and add the appropriate one
    label.removeClass('status-active status-inactive');
    if (status) {
        label.text('Active').addClass('status-active');
    } else {
        label.text('Inactive').addClass('status-inactive');
    }

    $.ajax({
        url: '/people/' + id + '/toggle-status',
        type: 'POST',
        data: {
            status: status,
            _token: $('meta[name="csrf-token"]').attr('content')
        },
        success: function (response) {
            console.log(response.message);
        },
        error: function (xhr) {
            console.error(xhr.responseJSON.error);
        }
    });
});
</script>

@endsection