@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Aparat Desa</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="{{route('home')}}">Home</a>
                </li>
                <li class="active">
                    Aparat Desa
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <p class="text-muted font-13">
                    <a href="{{ route('backoffice-aparat-desa-form') }}" class="btn btn-primary btn-custom waves-effect waves-light"><i class="ti-plus"></i> Aparat Desa baru</a>
                </p>
                <table class="table table-bordered dt-responsive nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>NIP</th>
                            <th>Nama</th>
                            <th>Jabatan</th>
                            <th>Tahun Masuk</th>
                            <th>Status Jabatan</th>
                            <th>Foto</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('.table').DataTable({
                responsive : true,
                initComplete : function() {
                    var api = this.api();
                    $('[data-toggle="tooltip"]').tooltip()
                    $('#tbl_filter input').off('.DT').on('input.DT',function() {
                        api.search(this.value).draw();
                    });
                },
                oLanguage : {
                    sProcessing : "Getting Item"
                },
                processing : true,
                serverSide : true,
                ajax : {
                    url : "{{ route('backoffice-get-aparat-desa') }}",
                    type : 'POST',
                    data : {
                        _token : "{{csrf_token()}}"
                    },
                    dataType : 'JSON',
                    error : function(o,t,tr) {
                        alert(o.statusText);
                    }
                },
                columns : [
                    
                    {data : 'no_induk'},
                    {data : 'nama'},
                    {data : 'jabatan'},
                    {data : 'thn_masuk'},
                    {
                        data : 'status_active',
                        mRender : function(data) {
                            if (data == 1) {
                                return '<span class="label label-success">Aktif</span>';
                            }
                            else{
                                return '<span class="label label-pink">Non Aktif</span>';
                            }
                        }
                    },
                    {
                        data : 'img',
                        orderable : false,
                        mRender : function(data) {
                            return '<img style="height:93px; width:73px" src="'+data+'" />'
                        }
                    },
                    {
                        data : 'url',
                        orderable : false,
                        mRender : function(data) {
                            return ('<a href="'+data.edit+'" class="btn btn-icon waves-effect waves-light btn-warning"><i class="fa fa-pencil-square-o"></i></a>&nbsp<a data-link="'+data.hapus+'" class="btn btn-icon waves-effect waves-light btn-danger"><i class="fa fa-ban"></i></a>')
                        }
                    }

                ],
                "order": [[1, 'asc']]
            });
            $('.table tbody').on('click', '.btn-success', function() {
                let url = $(this).data('link');
                window.location = url;
            });
            $('.table tbody').on('click', '.btn-danger', function() {
                let url = $(this).data('link');
                if (confirm('Anda yakin ingin hapus data ?')) {
                    window.location = url;
                }
            });

        });
    </script>
</div> 
@endsection