<script id="details-template" type="text/x-handlebars-template">
    <div class="label label-info">User @{{ id }}'s Posts</div>
    <table class="table details-table" id="posts-@{{id}}">
        <thead>
            <tr>
                <th>nama tarif</th>
                <th>harga</th>
            </tr>
        </thead>
    </table>
</script>

<script type="text/javascript">
    $(document).ready(function(){

        var template = Handlebars.compile($("#details-template").html());

        var table = $('.tbl-tarif').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ $yajra }}",
            columns: [
            // or just disable search since it's not really searchable. just add searchable:false
            {
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": '<button class="btn btn-xs btn-flat btn-success"><i class="fa fa-plus"></i></button>'
            },
            {data: 'rownum', name: 'rownum'},
            {data: 'nama', name: 'nama'},
            {data: 'created_at', name: 'created_at'},
            {data: 'updated_at', name: 'updated_at'},
            {data: 'action', name: 'action'},

            ]
        });

        // Add event listener for opening and closing details
        $('.tbl-tarif tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var tableId = 'posts-' + row.data().id;

            if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(template(row.data())).show();
            initTable(tableId, row.data());
            tr.addClass('shown');
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });

        function initTable(tableId, data) {
            $('#' + tableId).DataTable({
                processing: true,
                serverSide: true,
                ajax: data.details_url,
                columns: [
                { data: 'nama', name: 'nama' },
                { data: 'harga', name: 'harga' },

                ]
            })
        }

        // btn refresh
        $('.btn-refresh').click(function(e){
            e.preventDefault();
            $('.preloader').fadeIn();
            location.reload();
        })

    })
</script>