@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title"><i class="fa fa-bullhorn"></i> Transparansi Dana Desa</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="{{route('home')}}">Home</a>
                </li>
                <li class="active">
                    Transparansi Dana Desa
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <h4 class="m-t-0 header-title"><b>Daftar Transparansi Dana desa</b></h4>
                <p class="text-muted font-13">
                    <a href="{{route('backoffice-transparansi-tambah')}}" class="btn btn-primary btn-custom waves-effect waves-light"><i class="ti-plus"></i> Data baru</a>
                </p>
                <table class="table table-striped table-bordered" width="100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Judul</th>
                            <th>Waktu publis</th>
                            <th>Publish oleh</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function format ( d ) {
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                '<tr>'+
                    '<td><img style="height:120px" src="'+d.file+'" /></td>'+
                    '<td>'+d.isi+'</td>'+
                '</tr>'+
            '</table>';
        }
        $(document).ready(function() {
            var table = $('.table').DataTable({
                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-transparansi-ajax') }}",
                    type : 'POST',
                    data : {
                        _token : "{{csrf_token()}}"
                    },
                    dataType : 'JSON',
                    error : function(o,t,tr) {
                        alert(o.statusText);
                    }
                },
                columns : [
                    {
                        "className" : 'details-control',
                        "orderable" :  false,
                        "data" : null,
                        "defaultContent" : ''
                    },
                    {data : 'judul'},
                    {data : 'waktu', orderable : false,},
                    {
                        data : 'post_by',
                        orderable : false,
                    },
                    {
                        data : 'link',
                        orderable : false,
                        mRender : function(data) {
                            return ('<a href="'+data.edit+'" class="btn btn-icon waves-effect waves-light btn-warning"><i class="fa fa-wrench"></i></a>&nbsp<a class="btn btn-icon waves-effect waves-light btn-danger" data-link="'+data.delete+'"><i class="ti-close"></i></a>')
                        }
                    }

                ],
                "order": [[1, 'asc']]
            });
            $('.table tbody').on('click', '.btn-danger', function() {
                let url = $(this).data('link');
                if (confirm('Anda yakin ..?')) {
                    window.location = url;
                }
            });
            $('.table tbody').on('click', '.btn-success', function() {
                let url = $(this).data('link');
                window.location = url;
            });
            var detailRows = [];
            $('.table tbody').on( 'click', 'tr td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );
                if ( row.child.isShown() ) {
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                }
            });
        });

    </script>
</div> 
@endsection