@extends('layout.main_layout')
@section('content')
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-md-12">
                <a href="{{route('buatSK-link')}}">
                    <button class="btn btn-primary dim" type="button">
                        <i class="fa fa-plus"></i> &nbsp;Buat Surat Keluar Baru
                    </button>
                </a>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Monitoring Surat Keluar</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover dataTables-example" id="tabel">
                            <thead>
                                <tr>
                                    <th>No. Surat</th>
                                    <th>Tanggal Surat</th>
                                    <th>Perihal Surat</th>
                                    <th>Tujuan</th>
                                    <th>Status</th>
                                    <th>Menu</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="modal-riwayat" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="jdl">Riwayat Surat</h4>
            </div>
            <div class="modal-body" id="isi">
                <div class="row">
                    <div class="col-md-12">
                        <h3>Riwayat Approval</h3>
                    </div>
                    <div class="col-md-12">
                        <table class="table table-bordered" id="tabel_approval">
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <x id="loadingbar">
                    <div class="btn btn-sm">
                        <div class="sk-spinner sk-spinner-wave">
                            <div class="sk-rect1"></div>
                            <div class="sk-rect2"></div>
                            <div class="sk-rect3"></div>
                            <div class="sk-rect4"></div>
                            <div class="sk-rect5"></div>
                        </div>
                    </div>
                    <div class="btn btn-sm" style="margin-left:-10px;">Harap Tunggu...</div>
                </x>
                <button type="button" class="btn btn-white" data-dismiss="modal">Batal</button>
            </div>
        </div>
    </div>
</div>

@endsection
@section('css')
<!-- Data Tables -->
<link href="{{asset('css/plugins/dataTables/dataTables.bootstrap.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/dataTables/dataTables.responsive.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/dataTables/dataTables.tableTools.min.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/iCheck/custom.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/jsTree/style.min.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/sweetalert/sweetalert.css')}}" rel="stylesheet">
@endsection
@section('js')
<!-- Data Tables -->
<script src="{{asset('js/plugins/dataTables/jquery.dataTables.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.responsive.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.tableTools.min.js')}}"></script>
<script src="{{asset('js/plugins/iCheck/icheck.min.js')}}"></script>
<!-- Nestable List -->
<script src="{{asset('js/plugins/nestable/jquery.nestable.js')}}"></script>
<script src="{{asset('js/plugins/jsTree/jstree.min.js')}}"></script>
<script src="{{asset('js/plugins/sweetalert/sweetalert.min.js')}}"></script>
<script src="{{asset('js/handlebars-v4.0.5.js')}}"></script>

<script type="text/javascript">

$(document).ready(function () {
//    var template = Handlebars.compile($("#details-template").html());
    var table = $('#tabel').DataTable({        
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('listSK-data') }}",
        "columns": [            
            {data: 'nomor', name: 'nomor', width: '1%'},
            {data: 'tanggal', name: "tanggal", width: '1%'},
            {data: 'perihal', name: 'perihal', width: '2%'},
            {data: 'jabatan.namajabatan', name: 'jabatan.namajabatan', width: '2%'},
            {data: 'status_surat', name: 'status_surat', width: '1%', class: 'details-control', orderable: false, searchable: false},
            {data: 'action', orderable: false, searchable: false, width: '2%'}
        ],
        "order": [1, 'desc']
    });
    
    $('#tabel tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
//            alert(row.data().log_approval[0].tipe_log);
            if (row.data().log_approval[0].tipe_log == 'reject') {
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        }
    });
    $('#btnTambah').click(function () {
    });

});
function riwayatsurat(recid) {
    $('#modal-riwayat').modal('show');
    $('#tabel_approval').empty();
    $.ajax({
        url: "{{URL::to('riwayatsurat')}}" + "/" + recid,
        type: "GET",
        success: function (result) {
            $('#loadingbar').hide();
            var approve = $('#tabel_approval').append('<thead><tr><th>Tanggal</th><th>NIP</th><th>Nama</th><th>Jabatan</th><th>Status</th></tr></thead><tbody>');
            var apprv = result.apprv.log_approval;
            for (var i = 0; i < apprv.length; i++) {
                var tag = '<tr><td>' + apprv[i]['doc'] + '</td><td>' + apprv[i]['approval']['nip_apprv'] + '</td><td>' + apprv[i]['approval']['role']['nama'] + '</td><td>' + apprv[i]['approval']['jabatan']['namajabatan'] + '</td>';
                if (apprv[i]['tipe_log'] == 'approve')
                    tag = tag + '<td><label class="label label-success">Approve</label></td></tr>';
                else
                    tag = tag + '<td><label class="label label-danger">Reject</label></td></tr>';

                $('#tabel_approval').append(tag);
            }

            $('#tabel_approval').append('</tbody>');
        }
    });
}
function kirimsurat(recid) {
    swal({
        title: "Apakah Anda yakin?",
        text: "Anda akan mengirim surat ini untuk di approve.",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Ya, Kirim!",
        cancelButtonText: "Tidak",
        closeOnConfirm: false
    },
    function () {
        $.ajax({
            url: "{{route('kirim-sk')}}",
            type: "POST",
            data: {
                '_token': '{{csrf_token()}}',
                'recid': recid
            },
            success: function (result) {
                if (result['sukses'] == 1) {
                    swal("Sukses!", "Surat berhasil diapprove", "success");
                }
                else
                    swal("Gagal!", "Surat gagal diapprove", "error");
                $('#tabel').DataTable().ajax.reload();
            }
        });
    });
//    $('#tabel').dataTable().fnStandingRedraw();

}
function format(d) {
    // `d` is the original data object for the row
    return '<table class="table">' +
            '<tr>' +
            '<td style="width: 10%;">Alasan Ditolak:</td>' +
            '<td style="width: 90%;">' + d.log_approval[0].alasan + '</td>' +
            '</tr>' +
            '</table>';
}

</script>
@endsection