@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="row align-items-end">
        <div class="col-lg-8">

            <div class="page-header-title">
                <div class="d-inline">
                    <h4>Manage Village</h4>
                    <!-- <span>lorem ipsum dolor sit amet, consectetur adipisicing elit</span> -->
                </div>
            </div>
        </div>
        <div class="col-lg-4 text-right">
            <a href="{{ route('village.create') }}" class="btn cur-p btn-sm btn-primary">Add Village</a>
        </div>
    </div>
</div>
<!-- Page-header end -->

<!-- Page-body start -->
<div class="page-body">
    {{-- <form class="" method="GET" action="{{url('users/')}}" id="needs-validation">
    @csrf
    @php $session_data = Session::get('user_filter_session'); @endphp
    <div class="row">

        <div class="col-md-2 mb-3">
            <label for="validationCustom02">State<span class="red">*</span></label>
            <select class="form-control" name="state_id" id="state_id">
                <option value="">--Select--</option>
                @foreach ($states as $state)
                <option value="{{ $state->state_id }}">{{ $state->state_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2 mb-3">
            <label for="validationCustom02">District<span class="red">*</span></label>
            <select class="form-control district_id" name="district_id" id="district_id">
                <option value="">--Select--</option>
            </select>
        </div>
        <div class="col-md-2 mb-3">
            <label for="validationCustom02">Block Name<span class="red">*</span></label>
            <select class="form-control block_id" name="block_id" id="block_id">
                <option value="">--Select--</option>

            </select>
        </div>
        <div class="col-md-2 mb-3">
            <label for="validationCustom02">Gram Panchayat</label>
            <select class="form-control panchayat_id" name="panchayat_id" id="panchayat_id">
                <option value="">--Select--</option>

            </select>
        </div>
        <div class="col-md-4 mt-4 ">
            <input type="submit" class="btn btn-primary text-white" name="Search" value="Search">
            <button class="btn btn-primary text-white" name="clear" value="clear">Clear</button>

        </div>

        <div class="row " style="margin-left: 950px">
            <div class="col-md-2 ">
                <a class="download_invoice" href="{{url('UserExport')}}" style="background:transparent;border: none;"><img src="{{asset('assets/images/excel.png')}}" class="excel"></a>
            </div>
        </div>
    </div>
    </form> --}}
    <div class="row">
        <div class="col-sm-12">
            <!-- Zero config.table start -->
            <div class="card">
                <div class="card-block">

                    <div class="table-responsive">
                        @include('common.error')
                        <table id="simpletable" class="table table-striped table-bordered nowrap">
                            <thead>
                                <tr>
                                    <th width="5%">Sr. No.</th>
                                    <th width="20%">State</th>
                                    <th width="20%">DistrictName</th>
                                    <th width="20%">Block/Taluk</th>
                                    <th width="20%">Gram Panchayat</th>
                                    <th width="5%">Village Code</th>
                                    <th width="20%">Village</th>
                                    <th width="5%">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<link rel="stylesheet" href="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}">
<link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}">
<link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}">
<script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
<script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

<script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.colVis.min.js') }}"></script>
<script src="{{ asset('bower_components\data_table\jszip.min.js') }}"></script>
<script src="{{ asset('bower_components\data_table\buttons.html5.min.js') }}"></script>

<script>
    $(function() {
        var table = $('#simpletable').DataTable({
            "processing": true,
            "serverSide": true, //Feature control DataTables' servermside processing mode.
            "bFilter": true,
            "bLengthChange": false,
            "ordering": true,
            "iDisplayLength": 10,
            "responsive": true,
            "ajax": {
                "url": "{{ route('village.index') }}",
                "type": "GET",
                "dataType": "json",
                "dataSrc": function(jsonData) {
                    return jsonData.data;
                }
            },
            //Set column definition initialisation properties.
            "columnDefs": [{
                "targets": [0,7], //first column / numbering column
                "orderable": false, //set not orderable
            }, ],
            dom: 'Bfrtip',
            lengthMenu: [
                [25, -1],
                ['10 rows', '25 rows', '50 rows', 'Show all']
            ],
            buttons: [{
                extend: 'excelHtml5',
                text: 'Export',
                title: 'Village',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6] // Specify the columns to export (0-indexed)
                }
            }]
        });
        // dataTable();
        $('#pageLengthSelect').on('change', function() {
            var newLength = parseInt($(this).val());
            table.page.len(newLength).draw();
        });
    });

    function fn_delete(id) {
        // alert(id);
        bootbox.confirm({
            title: "",
            message: "Are you sure, you want to delete this Village?",
            callback: function(result) {
                if (result) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    var url = '{{ route("village.destroy", ":id") }}';
                    url = url.replace(':id', id);

                    $.ajax({
                            type: "POST",
                            data: {
                                _method: "DELETE"
                            },
                            url: url,
                            dataType: 'JSON'
                        })
                        .done(function(response) {
                            bootbox.alert({
                                title: "Success",
                                message: response.message,
                                callback: function() {
                                    location.reload();
                                }
                            });
                        })
                        .fail(function(response) {
                            bootbox.alert({
                                title: "Error",
                                message: response.responseJSON.message ||
                                    'Something Went Wrong..'
                            });
                        });
                }
            }
        });
    }
</script>
@endsection