@extends('admin.layouts.master')

@section('content')

<link rel="stylesheet" href="https://datatables.yajrabox.com/highlight/styles/zenburn.css">
<script src="https://datatables.yajrabox.com/highlight/highlight.pack.js"></script>

<div class="row">
    <div class="col-md-12">
        <h4>{{ $title }}</h4>
        <div class="box box-warning">
            <div class="box-header">
                <p>
                    <button class="btn btn-flat btn-sm btn-warning btn-refresh"><i class="fa fa-refresh"></i> Refresh</button>
                </p>
            </div>
            <div class="box-body">
                <table class="table table-hover tbl-absen">
                    <thead>
                        <tr>
                            <th></th>
                            <th>#</th>
                            <th>Nama</th>
                            <th>total_masuk</th>
                            <th>total_pulang</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')

<script src="https://datatables.yajrabox.com/js/handlebars.js"></script>

<script id="details-template" type="text/x-handlebars-template">
    <table class="table table-hover" id="@{{nik}}">
        <thead>
            <tr>
                <th>#</th>
                <th>Tanggal</th>
                <th>Absen Masuk</th>
                <th>Absen Pulang</th>
            </tr>
        </thead>
    </table>
</script>

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



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

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

        var table = $('.tbl-absen').DataTable({
            scrollY:400,
            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-success btn-xs" id="delete"><i class="fa fa-plus"></i></button>'
                },
                {data: 'rownum', name: 'rownum'},
                {data: 'nama', name: 'nama'},
                {data: 'total_masuk', name: 'total_masuk'},
                {data: 'total_pulang', name: 'total_pulang'}
            ]
        });

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

            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({
                scrollY:100,
                processing: true,
                serverSide: true,
                ajax: data.details_url,
                columns: [
                { data: 'rownum', name: 'rownum' },
                { data: 'tanggal', name: 'tanggal' },
                { data: 'masuk', name: 'masuk' },
                { data: 'pulang', name: 'pulang' },
                ]
            })
        }

    })
</script>



@endsection