@extends('layout.main_layout')
@section('content')
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Approval 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>Referensi</th>
                                    <th>Tujuan</th>
                                    <th>Menu</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-detail" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Detail Surat</h4>
            </div>
            <div class="modal-body" style="background-color:#ededed; font-size: 9pt;">
                <div class="row">
                    <div class="col-sm-7" style="border:2px solid #929292; background-color:white">
                        <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin: 20px 0;">
                            <tr>
                                <td width="60%">
                                    <br>
                                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                        <tr>
                                            <td width="70px">Nomor</td>
                                            <td width="5px">:</td>
                                            <td id="nomor_surat"></td>
                                        </tr>
                                        <tr>
                                            <td>Lampiran</td>
                                            <td>:</td>
                                            <td id="lampiran_surat"></td>
                                        </tr>
                                        <tr>
                                            <td>Sifat</td>
                                            <td>:</td>
                                            <td id="sifat_surat"></td>
                                        </tr>
                                        <tr>
                                            <td>Perihal</td>
                                            <td>:</td>
                                            <td id="perihal_surat"></td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="40%">
                                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                        <tr>
                                            <td>Tujuan</td>
                                        </tr>
                                        <tr>
                                            <td>Kepada :</td>
                                        </tr>
                                        <tr>
                                            <td id="yth_surat"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="20px"></td>
                            </tr>
                            <tr>
                                <td colspan="2" id="isi_surat">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-sm-5">
                        <h4>STATUS APPROVAL ATASAN</h4>
                        <table class="table table-responsive table-striped" border="1" cellspacing="0" cellpadding="5px" width="100%" style="font-size:8pt; background-color:white; margin-bottom:20px">
                            <thead>
                                <tr>
                                    <th class="text-center">NO</th>
                                    <th class="text-center">NAMA</th>
                                    <th class="text-center">JABATAN</th>
                                    <th class="text-center">STATUS</th>
                                </tr>
                            </thead>
                            <tbody id="tbody_approval">
                            </tbody>
                        </table>
                        <h4>ALASAN DITOLAK</h4>
                        <form class="form-horizontal formReject" id="formReject">
                        <div class="form-group">
                            <input id="recid_surat1" name="recid_surat" type="hidden">
                            <input id="recid_apprv1" name="recid_apprv" type="hidden">
                            <input id="_token" name="_token" type="hidden" value="{{csrf_token()}}">
                            <textarea name="alasan" id="alasan" class="form-control" rows="4" required style="border: 1px solid #929292;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">Batal</button>
                <button id="btn_reject" type="submit" class="btn btn-danger">Kembalikan</button>
            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@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"> --}}
<style type="text/css">
    .modal-lg {
        width: 1042px !important;
    }
    .form-horizontal .form-group {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
</style>
@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/plugins/sweetalert2/sweetalert2.all.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#modal-test').modal('show');
        $('#tabel').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('v2:approval-data') }}",
            "columns": [
                {data: 'nomor', name: 'nomor', width: '2%'},
                {data: 'tanggal', name: "tanggal", width: '1%'},
                {data: 'perihal', name: 'perihal', width: '2%'},
                {data: 'suratmasuk.perihal', name: 'suratmasuk.perihal', width: '2%'},
                {data: 'jabatan.namajabatan', name: 'jabatan.namajabatan', width: '2%'},
                {data: 'action', orderable: false, searchable: false, width: '1%'}
            ],
            "order": [1, 'desc']
        });

        $('.formReject').submit(function(e){
            e.preventDefault();
            $('#modal-detail').modal('hide');
            $reject = $(this);
            Swal.fire({
                title: "Apakah Anda yakin?",
                text: "Anda akan reject (menolak) surat ini.",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, reject!",
                cancelButtonText: "Tidak",
                closeOnConfirm: false
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{route('v2:SK-reject')}}",
                        type: "POST",
                        data: $reject.serialize(),
                        success: function(result){
                            // console.log(result);
                            if(result['sukses'] == 1){
                                // swal("Sukses!", "Surat berhasil direject", "success");
                                Swal.fire('Sukses!', 'Surat berhasil direject', 'success');
                            }
                            else
                                Swal.fire("Gagal!", "Surat gagal direject", "error");
                            var table = $('#tabel').dataTable();
                            table.fnStandingRedraw();
                        }
                    });
                }
            })




            // swal({
            //     title: "Apakah Anda yakin?",
            //     text: "Anda akan reject (menolak) surat ini.",
            //     type: "warning",
            //     showCancelButton: true,
            //     confirmButtonColor: "#DD6B55",
            //     confirmButtonText: "Ya, reject!",
            //     cancelButtonText: "Tidak",
            //     closeOnConfirm: false
            // },
            // function(){
            //     $.ajax({
            //         url: "{{route('v2:SK-reject')}}",
            //         type: "POST",
            //         data: $('#formReject').serialize(),
            //         success: function(result){
            //             if(result['sukses'] == 1){
            //                 swal("Sukses!", "Surat berhasil direject", "success");
            //             }
            //             else
            //                 swal("Gagal!", "Surat gagal direject", "error");
            //             var table = $('#tabel').dataTable();
            //             table.fnStandingRedraw();
            //         }
            //     });
            // });
    //        var table = $('#tabel').dataTable();
    //                    table.fnStandingRedraw();
        });
    });
    function lihatSurat(recid, apprv){
        $('#recid_surat1').val(recid);
        $('#recid_apprv1').val(apprv);
        $('#alasan').val('');
        $.ajax({
            url: "{{url('v2/DetilSuratKeluar')}}"+"/"+recid,
            type: "GET",
            success: function(result){
                $('#nomor_surat').html(result['data']['nomor']);
                $('#lampiran_surat').html(result['data']['lampiran']);
                $('#perihal_surat').html(result['data']['perihal']);
                $('#sifat_surat').html(result['data']['sifat']);
                var yth = 'Yth. '+result['data']['jabatan']['namajabatan']+'<br>'+result['data']['tujuan_alamat']+'<br>di -<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b><u>'+result['data']['tujuan_kota']+'</u></b>';
                //var yth = '';
                $('#yth_surat').html(yth);
                $('#isi_surat').html(result['data']['isi']);

                var html_apprv = '';
                for(var i = 0; i < result['data']['approval'].length; i++){
                    html_apprv = html_apprv + '<tr>';
                    html_apprv = html_apprv + '<td>' + (i+1) + '</td>';
                    html_apprv = html_apprv + '<td>' + result['data']['approval'][i]['role']['nama'] + '</td>';
                    html_apprv = html_apprv + '<td>' + result['data']['approval'][i]['jabatan']['namajabatan'] + '</td>';
                    if(result['data']['approval'][i]['status_apprv'] == 0)
                        html_apprv = html_apprv + '<td><span class="label label-info">Pending</span></td>';
                    else if(result['data']['approval'][i]['status_apprv'] == 1)
                        html_apprv = html_apprv + '<td><span class="label label-primary">Belum diapprove</span></td>';
                    else if(result['data']['approval'][i]['status_apprv'] == 2)
                        html_apprv = html_apprv + '<td><span class="label label-success">Approved</span></td>';
                    html_apprv = html_apprv + '</tr>';
                }
                $('#tbody_approval').html(html_apprv);

                $('#modal-detail').modal({ backdrop: 'static', keyboard: false });
                $('#modal-detail').modal('show');
            }
        });
    }
    function approveSurat(recid){
        Swal.fire({
            title: "Apakah Anda yakin?",
            text: "Anda akan approve (menyetujui) surat ini.",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Ya, approve!",
            cancelButtonText: "Tidak",
            closeOnConfirm: false
        },
        // function(){
        //     console.log('b');
        //     return $.ajax({
        //         url: "{{route('v2:SK-approve')}}",
        //         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();
        //         }
        //     });
        // }
        ).then((result) => {
          if (result.isConfirmed) {
                return $.ajax({
                url: "{{route('v2:SK-approve')}}",
                type: "POST",
                data: {
                    '_token' : '{{csrf_token()}}',
                    'recid'  : recid
                },
                success: function(result){
                    if(result['sukses'] == 1){
                        Swal.fire("Sukses!", "Surat berhasil diapprove", "success");
                    }
                    else{
                        Swal.fire("Gagal!", "Surat gagal diapprove", "error");    
                    }
                    $('#tabel').DataTable().ajax.reload();
                }
            });
          }
        });
    }
    function masukkanPin(recid){
        Swal.fire({
            icon:'warning',
          title: 'Masukkan Pin Anda',
           html:
            '<input autocomplete="new-password" id="swal-input1" class="swal2-input" type="password" maxlength="6">' +
            '<input id="swal-input2" class="swal2-input" type=\'hidden\' value='+recid+'>',
          showCancelButton: true,
          confirmButtonText: 'Konfirmasi',
          cancelButtonText: 'Batal',
          showLoaderOnConfirm: true,
          preConfirm: () => {
            var login = document.getElementById('swal-input1').value
            var recid = document.getElementById('swal-input2').value
            console.log(login)
            console.log(recid)
            var pin = login;
            var reg = /^-?\d+\.?\d*$/
            pin = pin.match(reg)
            if(pin != null){
                return $.ajax({
                url: "{{route('v2:SK-cek-pin-approve')}}",
                type: "POST",
                data: {
                    '_token' : '{{csrf_token()}}',
                    'pins'  : pin,
                    'recid' : recid
                },
            });
            } else {
                Swal.showValidationMessage(
                    `Pin hanya berupa angka`
                )
            }
          },
          allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
          if (result.isConfirmed) {
            if(result.value['status'] == true){
                Swal.fire({
                  icon: 'success',
                  title: 'Pin benar',
                  text: result.value['pesan']+" Harap Tunggu...",
                  timer: 1500,
                  timerProgressBar: true,
                })
                setTimeout(function(){
                    approveSurat(result.value['recid']);
                }, 1500); 
            } else {
                Swal.fire({
                    icon: 'error',
                    title: `Gagal`,
                    text: result.value['pesan'],
                })
            }
          }
        })
    }
    function rejectSurat(recid, recid_apprv){
        $('#recid_surat').val(recid);
        $('#recid_apprv').val(recid_apprv);
        $('#modal-reject').modal('show');
    }
</script>
@endsection