@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>Daftar Surat Masuk</h5>
                </div>
                <div class="ibox-content">
                  <div class="row">
                    <div class="col-xs-12 col-md-4">
                      <label>Filter Kategori Surat</label>
                      <select class="form-control" name="filter">
                        <option value="">Semua</option>
                        <option value="Undangan">Undangan</option>
                        <option value="Surat Segera">Surat Segera</option>
                        <option value="Surat Biasa">Surat Biasa</option>
                      </select>
                    </div>
                    <div class="col-xs-12 col-md-4" id='tanggal_filter'>
                        <label>Filter Tanggal</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div> 
                            <input type="text" id="tanggal" name="tanggal_filter" class="form-control daterange-picker" value="">
                        </div>
                    </div>
                  </div>
                  <br>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover dataTables-example" id="tabel">
                            <thead>
                                <tr>
                                    <th>Recid</th>
                                    <th>No TU</th>
                                    <th>Tanggal Diterima</th>
                                    <th>Pengirim</th>
                                    <th>Perihal</th>
                                    <th>No Surat</th>
                                    <th>Kategori</th>
                                    <th>Menu</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Recid</th>
                                    <th>No TU</th>
                                    <th>Tanggal Diterima</th>
                                    <th>Pengirim</th>
                                    <th>Perihal</th>
                                    <th>No Surat</th>
                                    <th>Kategori</th>
                                    <th>Menu</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal inmodal fade" id="modal-disposisi" 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">Tindak Lanjut Surat Masuk</h4>
            </div>
            <div class="modal-body" id="isi">
                <div class="sk-spinner sk-spinner-double-bounce">
                    <div class="sk-double-bounce1"></div>
                    <div class="sk-double-bounce2"></div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <a target="_blank" href="" id="preview-a"><button type="button" class="btn btn-success">Tampilan Full</button></a>
                        <a target="_blank" href="" id="referensi-a"><button type="button" class="btn btn-success">Referensi Surat</button></a>
                        <br>
                        <iframe class="hidden-xs" src="" id="preview" allowtransperancy="yes" scrolling="auto" width="450" height="500"></iframe>
                    </div>
                    <div class="col-md-6">
                        @if($role!='TU')
                        <form class="form-horizontal" id="asalsurat">
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <div class="col-sm-10">
                                    <h3 class=" text-navy">Asal Surat</h3>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Nomor</label>
                                <label class="col-sm-7 text-navy asal" id="nomor"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Pengirim</label>
                                <label class="col-sm-7 text-navy asal" id="pengirim"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Perihal</label>
                                <label class="col-sm-7 text-navy asal" id="perihal"></label>
                            </div>
                        </form>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Disposisi</label>
                            </div>
                            <ul id="disposisi">

                            </ul>
                        </form>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Catatan</label>
                                <label class="col-sm-7 text-navy asal" id="catatan"></label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-3 text-navy">Status</label>
                                <label class="col-sm-7 text-navy asal" id="status"></label>
                            </div>
                        </form>
                        @endif
                        <form id="form-disposisi" class="form-horizontal" method="post" action="{{route('suratmasuk-save')}}">
                            <input type="text" class="hidden" name="_token" value="{{csrf_token()}}">
                            <input type="text" class="hidden" name="recid">
                            <input type="text" class="hidden" name="role" value="{{$role}}">                            
                            <input type="text" class="hidden" id="parent" name="parent" value="{{Session::get('loginaktif')}}">
                            <input type="text" class="hidden" id="kode_lead">
                            <input type="text" class="hidden" id="tipejabatan">
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <div class="col-sm-10">
                                    <h3>TUJUAN</h3>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <div class="col-sm-10">
                                    @if($role=='TU' && Session::get('loginaktif') == 5)
                                    <div class="i-checks zz" id="dirutdiv"><label> <input type="checkbox" id="dirut" name="tujuan[]" value="1"> Direktur Utama</label></div>
                                    @endif
                                    @foreach($jabatan as $row)
                                    <div class="i-checks xx"><label> <input type="checkbox" name="tujuan[]" value="{{$row->recidjabatan}}"> {{$row->namajabatan}}</label></div>
                                    @endforeach
                                    
                                    @foreach($admin_staff as $row)
                                    <div class="i-checks xx"><label> <input type="checkbox" name="tujuan_admin[]" value="{{$row->nip}}"> {{$row->nama}}</label></div>
                                    @endforeach
                                    
                                    @if(\Auth::user()->role->jabatan->leveljab == 0 || $level_jabatan->leveljab == 0)
                                        <br>
                                        <h4>Tujuan Lainnya</h4>
                                        <select class="form-control" id="tjnlain" name="tujuanlain">
                                            <option value="">Pilih Tujuan Lainnya</option>
                                            @foreach($lain2 as $row)
                                            <option value="{{$row->recid_nonstruktural}}">{{$row->namajabatan_nonstruktural}}</option>
                                            @endforeach
                                        </select>
                                    @endif
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-2" id="label_lead">Lead</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="lead" name="lead">                                            
                                        <option value="">Pilih Lead</option>
                                        @foreach($jabatan as $row)                                                                                     
                                            <option value="{{$row->recidjabatan}}">{{$row->namajabatan}}</option>                                        
                                        @endforeach                                            
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-2">Pilihan</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="menu" name="menu">
                                        @if($level_jabatan->leveljab < 3)
                                        <option value="1">Disposisi</option>
                                        @endif
                                        <option value="2">Close</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" id="tgl_disposisi">
                                <label class="col-sm-2">&nbsp;</label>                                
                                <label class="col-sm-2">Tanggal Disposisi</label>                                
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar" ></i>
                                        </span>                                            
                                        <input type="text" name="tgl_disposisi" class="form-control" value="{{date('d-m-Y')}}" readonly>
                                     </div>
                                </div>
                            </div>

                            <div class="form-group {{(\Auth::user()->role->jabatan->leveljab<=3)?'':'hidden'}}">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-2">Disposisi</label>
                                <div class="col-sm-8">
                                    <!-- <select id="disposisi" class="entri select2 form-control select2-container" name="disposisi"> -->
                                    <!-- <select id="disposisi" class="entri select2 form-control select2-container" name="disposisi[]" multiple> -->
                                        <select id="disposisi_banyak" class="form-control select2_demo_1" name="disposisi[]" multiple>
                                        <option value="0"></option>
                                        @foreach($tl as $row)
                                        <option value="{{$row->kodedisposisi}}">{{$row->disposisi}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group {{(\Auth::user()->role->jabatan->leveljab<=3)?'':'hidden'}}">
                                <label class="col-sm-2">&nbsp;</label>
                                <label class="col-sm-2">Catatan Disposisi</label>
                                <div class="col-sm-8">
                                    <textarea name="catatan" class="form-control" rows="2"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2">&nbsp;</label>
                                <div class="col-sm-10">
                                    <button type="submit" id="subm" class="btn btn-primary pull-right col-sm-4">Simpan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </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/select2/select2.min.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/datapicker/datepicker3.css')}}" rel="stylesheet">

<style>
.select2-container {
    width: 100% !important;
    z-index:10000;
}
</style>
<style>
  ul#disposisi{
    margin-left: 45px;
  }
  ul#disposisi li{
    font-weight: bold;
    color: #1ab394;
  }
</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>
<script src="{{asset('js/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
<script type="text/javascript">
var table = $('#tabel').DataTable({
    "processing": true,
    "serverSide": true,
    "ajax": {
      url:"{{ route('suratmasuk-data',['role'=>$role]) }}",
      data: function (d) {
          d.kategori = $("select[name='filter']").val();          
          d.tanggal_filter = $("#tanggal").val();
          console.log(d.tanggal_filter);
      }
    },
    "columns": [
        {data: 'kode',name:'TU_M_SURAT.recidsurat', class: 'hidden'},
        {data: 'notu'},
        {data: 'tgltu'},
        {data: 'pengirimsurat'},
        {data: 'perihal'},
        {data: 'nosurat'},
        {data: 'kategori'},
        {data: 'action', orderable: false, searchable: false}
        //{data: 'action', name: 'action', orderable: false, searchable: false}
    ],
    "lengthMenu": [[25, 50, -1], [25, 50, "All"]],
    "order": [[0, 'desc']]
            /*"dom": "lTfigt",
             "tableTools": {
             "sSwfPath": "{{asset('js/plugins/dataTables/swf/copy_csv_xls_pdf.swf')}}"
             }*/
});
$(document).ready(function () {    
    $('#parent').empty();
    $('#kode_lead').empty();

    $('#subm').click(function () {
        @if(\Auth::user()->role->jabatan->leveljab < 3)
            if($('#parent').val() == $('#kode_lead').val()){
                if($('[name=menu]').val() == '1' && $('[name=lead]').val() == ''){
                    if($('#tipejabatan').val() == 'struktural'){
                        alert('Lead harus dipilih!');
                        return false;
                    }                    
                }
            }
            
            if (($("input:checkbox:checked").length == 0 && $('[name=menu]').val()==1) && $('[name=tujuanlain]').val()=='') {
                alert('Pilih minimal satu tujuan');
                return false;
            }            

            if ($("input:checkbox:checked").length == 0 && $('[name=tujuanlain]').val()!='') {
                $("#lead").prop('required',false);
            }
        @endif
    });
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green'
    });
    $("#dirut").on("ifChecked", function (event) {
        //$("[name^=tujuan]").iCheck('uncheck');
        $("[name^=tujuan]").iCheck('disable');
        $("#dirut").iCheck('enable');
        //$("#dirut").iCheck('check');
        $("[name=disposisi]").attr('disabled', true);
        $("[name=catatan]").attr('disabled', true);
    });
    $("#dirut").on("ifUnchecked", function (event) {
        $("[name^=tujuan]").iCheck('enable');
        $("[name=disposisi]").attr('disabled', false);
        $("[name=catatan]").attr('disabled', false);
    });
    $(".select2_demo_1").select2();

});
function disposisi(kode) {    
    $('.asal').text('');
    $("#form-disposisi").removeClass('hidden');
    $('#disposisi_banyak').val(null).trigger('change');
    $('#isi').toggleClass('sk-loading');

    $.ajax({
        type: "post",
        url: "{{route('suratmasuk-detail')}}",
        data: {kode: kode, _token: '{{ csrf_token() }}'},
        success: function (result) {            
            $('#nomor').text(result.nosurat);
            $('#pengirim').text(result.pengirimsurat);
            $('#perihal').text(result.perihal);
            $('#status').text(result.disposisi[0].status.keterangan);
            $('#tipejabatan').val(result.tipejabatan);           
            $("#disposisi").children().remove();            
            console.log(result);
            $('#isi').toggleClass('sk-loading');
            var textShow = '';
            if(result.data_disposisi!=null){
                var arr = [];
                var d = result.data_disposisi;
                while (true) {
                    var isiTl = '-';
                    var j = d.jabatan;
                    var disp = d.disposisi_banyak;
                    if(d.isitl != null) isiTl = d.isitl;
                    if(j != null) arr.push({jabatan:j.namajabatan,isitl:isiTl,recid:d.recidjabatan,disposisi:disp});
                    // $("#disposisi").append("<li>"++"<ul><li>"+isiTl+"</li></ul></li>")
                    var d = d.semua_atasan;
                    if(d==null) break;
                }
                arr.reverse();                

                if((result.data_disposisi.suratmasuk.disposisi_jab)==1){
                    var catatan_dirut = result.data_disposisi.suratmasuk.disposisi;
                    $('#isi').toggleClass('sk-loading');
                    $.ajax({
                        type: "post",
                        url: "{{route('disposisi-banyak')}}",
                        data: {disposisi_banyak: result.data_disposisi.suratmasuk.disposisi_banyak, _token: '{{ csrf_token() }}'},
                        success: function (result) { 
                            var disposisi_banyak = result;

                            if(catatan_dirut == null){
                                catatan_dirut = '-';
                            }
                            
                            $("#disposisi").append("<li>Dirut<ul><li>Disposisi: "+disposisi_banyak+"</li><li>Catatan: "+catatan_dirut+"</li></ul></li>")
                            $('#isi').toggleClass('sk-loading');
                        }
                    });
                    
                }else if((result.data_disposisi.suratmasuk.disposisi_jab)==5){
                    $("#disposisi").append("<li>Sekper<ul><li>-</li></ul></li>");
                }

                var jab = "{{Session::get('loginaktif')}}";

                $.each(arr,function(key,val){                    
                    if(jab != val.recid){
                        $('#isi').toggleClass('sk-loading');
                        $.ajax({
                            type: "post",
                            url: "{{route('disposisi-banyak')}}",
                            data: {disposisi_banyak: val.disposisi, _token: '{{ csrf_token() }}'},
                            success: function (result) { 
                                var disposisi_banyak = result;
                                $("#disposisi").append("<li>"+val.jabatan+"<ul><li>Disposisi: "+disposisi_banyak+"</li><li>Catatan: "+val.isitl+"</li></ul></li>");
                                $('#isi').toggleClass('sk-loading');
                            }
                        });                         
                    }
                });

                if(jab == result.lead){
                    $('#label_lead').show();        
                    $('#lead').show();    

                    $('#kode_lead').val(result.lead);                    
                }else{
                    $('#label_lead').hide();
                    $('#lead').hide();
                }

                /*if(result.tampil_disposisi_banyak != null){
                    var arrdisps = result.tampil_disposisi_banyak.split(",");
                    $('#disposisi_banyak').val(arrdisps);
                    $('#disposisi_banyak').trigger('change');

                    $("#disposisi").append("<ul><li>"+arrdisps+"</li></ul>")
                }    */            
                            
            }

            if(result.disposisi[0].statussurat == "9"){
                $("#form-disposisi").addClass('hidden');
            }

            if(result.disposisi_banyak != null){
                var arrdisp = result.disposisi_banyak.split(",");
                
                if(jab == result.disposisi_jab){
                    $('#disposisi_banyak').val(arrdisp);
                    $('#disposisi_banyak').trigger('change');
                }
            }        
            if(result.referensi_id){
                var ref = "{{URL::to('pdf').'/'}}" + result.referensi_id + ".pdf";
                $("#referensi-a").attr("href", ref);
                $('#referensi-a').removeClass('hidden');        
            }else{
                $('#referensi-a').addClass('hidden');
            }
            
        },
        failure: function(){
            console.log('error');
        }

    });    

    var url = "{{URL::to('pdf').'/'}}" + kode + ".pdf";
    $("[name=recid]").val(kode);
    $("[name^=tujuan]").iCheck('enable');
    $("[name^=tujuan]").iCheck('uncheck');
    $("[name=disposisi]").attr('disabled', false).val(1);
    $("[name=catatan]").attr('disabled', false).val('');    
    $("#preview").attr("src", url);
    $("#preview-a").attr("href", url);    
}

function filterTable(){
  table.ajax.reload(null,false);
}

$("select[name='filter']").on('change',function(){
    filterTable();
});

$("input[name='tanggal_filter']").on('change',function(){
    console.log('aaaaii');
    filterTable();
});

$(document).ready(function () {
    $('.daterange-picker').daterangepicker({format:'DDMMYYYY'});

    $('#tgl_disposisi .input-group.date').datepicker({
        todayBtn: "linked",
        format: "dd/mm/yyyy",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true
    });   

    /*$('#tanggal_filter .input-group.date').datepicker({
        todayBtn: "linked",
        format: "ddmmyyyy",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true
    }); */    
});

</script>
@endsection