@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>Pembuatan Surat Keluar</h5>
                </div>
                <div class="ibox-content">
                    <form method="post" id="form-surat" action="{{route('v2:suratkeluar-simpan')}}" class="form-horizontal" enctype="multipart/form-data">
                        <input type="text" class="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="text" name="tipe" class="hidden" value="{{($data==null)? '1' : '2'}}">
                        <input type="text" name="kode" class="hidden" value="{{$data->recid_suratkeluar or ''}}">
                        <div class="row">
                            <div class="col-sm-8">
                                {{-- 
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Pilih Template</label>
                                    <div class="col-sm-8">
                                        <select class="form-control chosen-select" name="template" id="template">
                                            @foreach($template as $row)
                                                <option value="{{$row->recid}}">{{$row->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <button class="ladda-button btn btn-primary" onclick="loadTemplate()"  type="button" data-style="expand-right">Load</button>
                                    </div>
                                </div>
                                --}}
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Pilih Referensi Surat</label>
                                    <div class="col-sm-8">
                                        <select class="form-control chosen-select" name="referensi" id="referensi">
                                            <option value=""> Tidak Ada</option>
                                            @foreach($referensi as $row)
                                                <option value="{{$row->recidsurat}}">[{{$row->nosurat}}] {{$row->perihal}} {{$row->pengirimsurat}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                {{-- 
                                <div class="form-group">                                
                                    <label class="col-sm-2 control-label">Sumber Dokumen</label>
                                    <div class="col-sm-8">
                                        <select id="dokumen" name="dokumen" class="form-control">
                                            <option value="upload">UPLOAD</option>
                                            <option value="scan">SCAN</option>
                                        </select>
                                    </div>
                                </div>
                                --}}
                                <h3 class="hide d-none">Header Surat</h3>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Jenis</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="jenis" id="jenis">
                                            <option value="Internal">Internal</option>
                                            <option value="Eksternal">Eksternal</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Nomor</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="nomor" class="form-control" value="{{ $data->nomor or '' }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Sifat</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="sifat" id="sifat">
                                            <option value="Biasa">Biasa</option>
                                            <option value="Penting">Penting</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Lampiran</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="lampiran" class="form-control" value="{{ $data->lampiran or '' }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Hal</label>
                                    <div class="col-sm-8">
                                        <input type="text" name="perihal" class="form-control" value="{{ $data->perihal or '' }}">
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group" id="data_1">
                                    <label class="col-sm-2 control-label">Tanggal</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="tanggal" class="form-control" value="{{ isset($data) ? date('d-m-Y', strtotime(trim($data->tanggal))) : '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="hide hr-line-dashed"></div>
                                <div id="tujuan-eks" class="hidden">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Nama Tujuan </label>
                                        <div class="col-sm-8">
                                            <input type="text" name="tujuan_nama" class="form-control" value="{{ $data->tujuan_nama or '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Alamat/Lokasi Tujuan </label>
                                        <div class="col-sm-8">
                                            <input type="text" name="tujuan_alamat" class="form-control" value="{{ $data->tujuan_alamat or '' }}">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Kota Tujuan </label>
                                        <div class="col-sm-8">
                                            <input type="text" name="tujuan_kota" class="form-control" value="{{ $data->tujuan_kota or '' }}">
                                        </div>
                                    </div>
                                </div>
                                <div id="tujuan-int">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Tujuan</label>
                                        <div class="col-sm-8">
                                            <select name="tujuan" data-placeholder="Pilih Personal" class="form-control chosen-select" required>
                                                <option value="">--Pilih Tujuan--</option>
                                                @foreach ($jabatan as $row)
                                                                                                        @if($data)
                                                        @if($data->tujuan_jab == $row->recidjabatan)
                                                                                                        
                                                        @endif
                                                    @endif
                                                <option {{$selected}} value="{{'0#'.$row->recidjabatan.'#'.trim($row->pic->nip)}}">{{$row->namajabatan.' ('.$row->pic->nama.')'}}</option>
                                                @endforeach
                                                @foreach ($pegawai as $row)
                                                                                                        @if($data)
                                                        @if($data->tujuan_nip == trim(str_replace('.','',$row->nip)))
                                                                                                        
                                                        @endif
                                                    @endif
                                                <option {{$selected}} value="{{'1#'.trim(str_replace('.','',$row->nip))}}">{{trim($row->nip).' '.trim($row->nama)}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group hidden" id="temp_jab">
                                        <label class="col-sm-2 control-label">Jabatan Sementara</label>
                                        <div class="col-sm-8">
                                            <input type="text" name="temp_jab" class="form-control" value="{{$data->tujuan_jab or ''}}">
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div id="tembusan-eks" class="hidden">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Tembusan</label>
                                        <div class="col-sm-8">
                                            <input type="text" name="tembusan_eks[]" id="tembusan-eks" class="form-control" value="{{ $data->tembusan_eks or '' }}">
                                        </div>
                                        <div class="col-sm-2">
                                            <button class="btn btn-warning" onclick="addTembusan()"  type="button">Tambah</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tembusan-int">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Tembusan</label>
                                        <div class="col-sm-8">
                                            <select name="tembusan[]" id="select-tembusan" multiple data-placeholder="Pilih Tembusan" class="form-control chosen-select">
                                                @foreach ($tembusan as $row)
                                                                                                        @if($data)
                                                        @foreach($data->tembusan as $baris)
                                                            @if($baris->jab_tembusan == $row->recidjabatan)
                                                                                                        
                                                            @endif
                                                        @endforeach
                                                    @endif
                                                    <option {{$selected}} value="{{$row->recidjabatan.'#'.trim($row->pic->nip)}}">{{$row->namajabatan.' ('.$row->pic->nama.')'}}</option>
                                                @endforeach                                    
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Font Size</label>
                                    <div class="col-sm-8">
                                        <select name="fontsize" class="form-control">
                                            @foreach ($fontsize as $row)
                                                                                                @if($data)
                                                    @if($data->fontsize == $row)
                                                                                
                                                    @endif
                                                @else
                                                    @if($row == '10.5')
                                                                                
                                                    @endif  
                                                @endif
                                                <option {{$selected}} value="{{$row}}">{{$row}}</option>
                                            @endforeach                                    
                                        </select>
                                    </div>
                                </div>
                                <hr class="hr-line-dashed">
                                <div class="form-group">
                                    <label class="col-sm-6 control-label"></label>
                                    <div class="col-sm-4 _text-right">
                                        <select class="form-control chosen-select" name="template" id="template">
                                                <option value="" _disabled>--Pilih Template--</option>
                                            @foreach($template as $row)
                                                <option value="{{$row->recid}}">{{$row->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <button class="ladda-button btn btn-primary" onclick="loadTemplate()"  type="button" data-style="expand-right">Load</button>
                                    </div>
                                </div>
                                <div id="isi">
                                    <div class="form-group" id="grp1">
                                        <label class="col-sm-2 control-label">Isi Surat</label>
                                        <div class="col-sm-8">  
                                            <div id="editor">
                                                <textarea id='edit' style="margin-top: 30px;width: 100%" name="isi">
                                                    {{$data->isi or ''}}
                                                </textarea>
                                            </div>
                                        </div>
                                        <div class="col-sm-2">  
                                            <button class="btn btn-default" id="preview" type="button">Preview</button>
                                        </div>
                                    </div>
                                </div>
                                <!-- sementara dinonaktifkan -->
                                <!-- <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Tata Bahasa</label>
                                    <div class="col-sm-8">
                                        <input type="checkbox" class="js-switch" name="tatabahasa" id="tatabahasa" />
                                    </div>
                                </div> -->
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Pembuat Surat</label>
                                    <div class="col-sm-8">
                                        <select name="pembuat" id="select-pembuat" data-placeholder="Pembuat Surat" class="form-control chosen-select">
                                                                                        @foreach ($pembuat as $row)
                                                                                                <option {{($n == (count($pembuat)-1)) ? 'selected' : ''}} value="{{$val}}">{{$teks}}</option> 
                                                                                   
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <div class="col-sm-2 col-sm-offset-2">
                                        <button class="btn btn-primary col-sm-12" id="simpan" type="button" onclick="submitForm();">Simpan</button>
                                    </div>
                                    <div class="col-sm-2">
                                        <a href="{{route('v2:datask-link')}}"><button class="btn btn-warning col-sm-12" type="button">Kembali</button></a>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group"> 
                                    <div class="col-sm-12 text-center">
                                        <h3 class="text-center">Sumber Dokumen</h3>
                                        <select id="dokumen" name="dokumen" class="form-control text-center">
                                            <option value="upload">UPLOAD</option>
                                            <option value="scan">SCAN</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12 text-center hide" id="scan-div">
                                        <h3 class="text-center">Hasil Scan</h3>
                                        <div id="dwtcontrolContainer" align="center"></div>
                                        
                                        <button type="button" class="btn btn-success btn-outline" onclick="AcquireImage();">Scan Document</button>
                                        <label class="label-danger">{!!$errors->first('file')!!}</label>
                                    </div>
                                    <div class="col-sm-12 text-center " id="upload-div">
                                        <h3 class="text-center">Upload File (Pdf)</h3>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">&nbsp;</label>
                                            <div class="col-sm-8">
                                                <input type="file" name="file_lampiran" accept="application/pdf">
                                            </div>
                                        </div>
                                    </div>
                                {{-- <label class="col-sm-2 control-label">Upload Lampiran</label>
                                <div class="col-sm-8">
                                    <input type="file" name="file_lampiran" accept="application/pdf">
                                </div> --}}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('css')
<link href="{{asset('css/plugins/chosen/chosen.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/summernote/summernote.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/summernote/summernote-bs3.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/datapicker/datepicker3.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/switchery/switchery.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/ladda/ladda-themeless.min.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/sweetalert/sweetalert.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css')}}" rel="stylesheet">
<!--froala-->
<link rel="stylesheet" href="{{asset('froala/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/froala_editor.pkgd.min.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/froala_style.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/code_view.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/draggable.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/colors.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/emoticons.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/line_breaker.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/table.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/char_counter.css')}}">
<link rel="stylesheet" href="{{asset('froala/css/plugins/fullscreen.css')}}">
<style type="text/css">
    .chosen-container-single .chosen-single div {
        top:  5px;
    }
</style>
@endsection
@section('js')
<script type="text/javascript" src="{{asset('froala/js/froala_editor.pkgd.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/align.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/char_counter.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/code_view.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/font_size.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/font_family.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/fullscreen.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/line_height.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/inline_style.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/line_breaker.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/lists.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/paragraph_format.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/paragraph_style.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/quote.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/table.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/save.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/print.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/special_characters.min.js')}}"></script>
<script type="text/javascript" src="{{asset('froala/js/plugins/word_paste.min.js')}}"></script>
<script type="text/javascript" src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>

<script src="{{asset('js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('js/plugins/chosen/chosen.jquery.js')}}"></script>
<script src="{{asset('js/plugins/switchery/switchery.js')}}"></script>
 <!-- Ladda -->
<script src="{{asset('js/plugins/ladda/spin.min.js')}}"></script>
<script src="{{asset('js/plugins/ladda/ladda.min.js')}}"></script>
<script src="{{asset('js/plugins/ladda/ladda.jquery.min.js')}}"></script>
<script src="{{asset('js/plugins/sweetalert/sweetalert.min.js')}}"></script>
<script src="{{asset('js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js')}}"></script>
<!--DWT -->
{{-- 
<script type="text/javascript" src="{{asset('Resources/dynamsoft.webtwain.initiate.js')}}"></script>
<script type="text/javascript" src="{{asset('Resources/dynamsoft.webtwain.config.js')}}"></script>
--}}
<script type="text/javascript" src="{{asset('js/jquery.form.min.js')}}"></script>

<script>
    var editor = new FroalaEditor("textarea#edit", {
        key: 'vYA6mC5C4D4I4E3B9dNSWXf1h1MDb1CF1PLPFf1C1EESFKVlA3C11A8C6D2B4D4G2F3A2==',
        // documentReady: true,
        tabSpaces: 5,
        enter: FroalaEditor.ENTER_BR,
        // charCounterMax: 4000,
        lineHeights: {
            Default: '',
            Single: '1',
                '1.15': '1.15',
                '1.5': '1.5',
            Double: '2'
        },
        tableStyles: {
            'table-border-none' : 'Border None',
            'table-border-solid' : 'Border Solid',
            'table-border-dashed' : 'Border Dashed',
            'table-border-dotted' : 'Border Dotted'
        },
        tableCellStyles: {
            'table-border-none' : 'Border None',
            'table-border-solid' : 'Border Solid',
            'table-border-dashed' : 'Border Dashed',
            'table-border-dotted' : 'Border Dotted'
        },
        toolbarButtons: {
            'moreText': {
                'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
            },
            'moreParagraph': {
                'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
            },
            'moreRich': {
                'buttons': ['insertTable', 'fontAwesome', '', 'embedly', 'insertHR']
            },
            'moreMisc': {
                'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'selectAll', 'html', 'help'],
                'align': 'right',
                'buttonsVisible': 2
            }
        }
    })
</script>
<script type="text/javascript">

    $(document).ready(function () {
        var data = "{{($data==null)? 'false' : 'true'}}";
        if(data == 'true'){
            $("#jenis").val("{{@$data->jenis}}");
            $("#sifat").val("{{@$data->sifat}}");
            $("#select-pembuat").val("{{@$data->approval[0]->nip_apprv}}");
        }
        var config = {
            '.chosen-select': {search_contains: true},
            '.chosen-select-deselect': {allow_single_deselect: true},
            '.chosen-select-no-single': {disable_search_threshold: 10},
            '.chosen-select-no-results': {no_results_text: 'Oops, nothing found!'},
            '.chosen-select-width': {width: "95%"}
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        $('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true,
            format: 'dd-mm-yyyy'
        });

        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });

        var elem = document.querySelector('.js-switch');
        var switchery = new Switchery(elem, { color: '#1AB394' });
        $("[name=tujuan]").change(function () {
            var val = $(this).val();
            var arr = val.split("#");
            if (arr[0] == '1') {
                $("#temp_jab").removeClass('hidden');
            } else {
                $("#temp_jab").addClass('hidden');
            }
            $.ajax({
                url: "{{route('v2:tembusan-load')}}",
                type: 'POST',
                data: {data: val, pembuat: $("#select-pembuat").val(), _token: "{{ csrf_token() }}"},
                dataType: 'json',
                success: function (result)
                {                
                    $("#select-tembusan").val(result.data).trigger("chosen:updated");
                }
            });
        });
        $('#preview').click(function () {
            $("#form-surat").attr('action', "{{route('v2:template-preview')}}").attr('target', "_blank").submit();
        });

        // $('#simpan').click(function () {
        //     console.log('sini');
        //     $("#form-surat").attr('action', "{{route('v2:suratkeluar-simpan')}}").attr('target', "");
        // });
        $("#jenis").change(function(){
            if($(this).val() == 'Eksternal'){
                $("#tujuan-eks").removeClass('hidden');
                $("#tembusan-eks").removeClass('hidden');
                $("#tujuan-int").addClass('hidden');
                $("#tembusan-int").addClass('hidden');
            }else{
                $("#tujuan-eks").addClass('hidden');
                $("#tembusan-eks").addClass('hidden');
                $("#tujuan-int").removeClass('hidden');
                $("#tembusan-int").removeClass('hidden');
            }
        });
        $("[name=tujuan]").change(function(){
            if($(this).val() == '0#1#DIRUT'){
                // $('.js-switch').click();
                changeSwitchery($('.js-switch'), true);
            }else{
                changeSwitchery($('.js-switch'), false);
            }
        })
        $("#dokumen").change(function(){
            if($(this).val() == 'upload'){
                $("#scan-div").addClass('hide');
                $("#upload-div").removeClass('hide');
            }else{
                $("#upload-div").addClass('hide');
                $("#scan-div").removeClass('hide');
            }
        });
    });
    function loadTemplate(){
        var l = $( '.ladda-button' ).ladda();
        l.ladda( 'start' );
        var recid = $("#template").val();
        swal({
            title: "Apakah Anda yakin?",
            text: "Anda akan me-reload template.",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Ya, Reload!",
            cancelButtonText: "Tidak",
            closeOnConfirm: true
        },
        function(){
            // editor.froalaEditor('html.set', 'aaaa');
            $.ajax({
                url: "{{route('v2:template-load')}}",
                type: "POST",
                data: {
                    '_token' : '{{csrf_token()}}',
                    'recid'  : recid
                },
                success: function(result){
                    // $("edit").html(result.hasil.isi);
                    editor.html.set(result.hasil.isi);
                    l.ladda('stop');
                }
            });
        });    
    }
    function addTembusan(){
        $("#tembusan-eks").append('<div class="form-group">' + 
                                '<label class="col-sm-2 control-label">&nbsp;</label>' +
                                '<div class="col-sm-8">' +
                                    '<input type="text" name="tembusan_eks[]" class="form-control" value="">' +
                                '</div>' +
                                '<div class="col-sm-2">' +
                                    '<button class="btn btn-danger" onclick="$(this).parent().parent().remove()" type="button">Hapus</button>' +
                                '</div>' +
                           '</div>');
    }
    function changeSwitchery(element, checked) {
        if ( ( element.is(':checked') && checked == false ) || ( !element.is(':checked') && checked == true ) ) {
            element.parent().find('.switchery').trigger('click');
        }
    }

    const loadScript = (FILE_URL, async = true, type = "text/javascript") => {
        return new Promise((resolve, reject) => {
            try {
                const scriptEle = document.createElement("script");
                scriptEle.type = type;
                scriptEle.async = async;
                scriptEle.src =FILE_URL;

                scriptEle.addEventListener("load", (ev) => {
                    resolve({ status: true });
                });

                scriptEle.addEventListener("error", (ev) => {
                    reject({
                        status: false,
                        message: `Failed to load the script ${FILE_URL}`
                    });
                });

                document.body.appendChild(scriptEle);
            } catch (error) {
                reject(error);
            }
        });
    };

    function AcquireImage_load(){
        loadScript("{{asset('Resources/dynamsoft.webtwain.initiate.js')}}")
        .then( data  => {
            console.log("Script loaded successfully", data);
        })
        .catch( err => {
            console.error(err);
        });
        
        loadScript("{{asset('Resources/dynamsoft.webtwain.config.js')}}")
        .then( data  => {
            console.log("Script loaded successfully", data);
        })
        .catch( err => {
            console.error(err);
        });
    }

    var DWObject;
    //Callback functions for async APIs
    function OnHttpUploadSuccess() {
        alert('Sukses');

        window.location.href = "{{route('v2:datask-link')}}";
    } 
    function OnHttpUploadFailure(errorCode, errorString, sHttpResponse) {
        alert('Upload Gagal');
        {{-- @if(isset($edit)) --}}
        window.location.href = "{{route('v2:suratkeluar-link')}}";
        
  
    }
    function AcquireImage(){
        AcquireImage_load();
        if(DWObject && DWObject.HowManyImagesInBuffer > 0){
            DWObject.RemoveAllImages();
        }
        DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        DWObject.IfDisableSourceAfterAcquire = true;
        DWObject.SelectSource();
        DWObject.OpenSource();
        DWObject.IfShowUI = false;
        DWObject.PixelType = 2;
        DWObject.Resolution = 150;
        DWObject.IfFeederEnabled = true;
        DWObject.IfDuplexEnabled = false;
        DWObject.IfDisableSourceAfterAcquire = true;
        DWObject.AcquireImage();
    }
    function SaveWithFileDialog() {
        var strHTTPServer = "{{url()}}";
        
        var strActionPage = "v2/SuratKeluar";

       // DWObject.IfSSL = true; // Set whether SSL is used
        //ubah
        var kode = $("[name=kode]").val();
        var tipe = $("[name=tipe]").val();
        var referensi = $("[name=referensi]").val();
        var jenis = $("[name=jenis]").val();
        var sifat = $("[name=sifat]").val();
        var nomor = $("[name=nomor]").val();
        var lampiran = $("[name=lampiran]").val();
        var perihal = $("[name=perihal]").val();
        var tanggal = $("[name=tanggal]").val();
        var tujuan = $("[name=tujuan]").val();
        var temp_jab = $("[name=temp_jab]").val();
        var selected = [];
        for (var option of document.getElementById('select-tembusan').options)
        {
            if (option.selected) {
                selected.push(option.value);
            }
        }
        var tembusan = selected;

        var isi = $("[name=isi]").val();
        var tatabahasa = document.getElementById("tatabahasa").checked;
        var pembuat = $("[name=pembuat]").val();

        var tujuan_nama = $("[name=tujuan_nama]").val();
        var tujuan_alamat = $("[name=tujuan_alamat]").val();
        var tujuan_kota = $("[name=tujuan_kota]").val();

        var tembusan_eks = [];
        var tembusan_eksternal = document.getElementsByName('tembusan_eks[]');
        for (var i = 0; i < tembusan_eksternal.length; i++) {
                tembusan_eks[i] = tembusan_eksternal[i].value;
        }
        // console.log('=========');
        // console.log(tujuan);
        // console.log(pembuat);
        // console.log('=========');
        // console.log(jenis);
        // console.log(tipe);

        // console.log(tanggal);
        // console.log(nomor);
        // console.log(lampiran);
        // console.log(sifat);
        // console.log(perihal);
        // console.log(temp_jab);

        // console.log(tujuan_nama);
        // console.log(tujuan_alamat);
        // console.log(tujuan_kota);

        // console.log(tatabahasa);
        // console.log(isi);
        // console.log(referensi);    
        
        // if(jenis == "Eksternal"){
        //     console.log('->eks')
        //     console.log(tembusan_eks);
        // } else {
        //     console.log('->int')
        //     console.log(tembusan);
        // }

        // alert(DWObject.HowManyImagesInBuffer);
        if(nomor == '' || lampiran == '' || perihal == '' || tanggal  == '' || isi  == '' ){
            alert('Harap isi semua data!!');
        }
        else if(DWObject && DWObject.HowManyImagesInBuffer > 0){ //send all request
            DWObject.SetHTTPFormField('_token', '{{csrf_token()}}');
            DWObject.SetHTTPFormField('pembuat', pembuat);
            DWObject.SetHTTPFormField('referensi', referensi);
            DWObject.SetHTTPFormField('jenis', jenis);
            DWObject.SetHTTPFormField('tipe', tipe);
            DWObject.SetHTTPFormField('tanggal', tanggal);
            DWObject.SetHTTPFormField('isi', isi);
            DWObject.SetHTTPFormField('nomor', nomor);
            DWObject.SetHTTPFormField('sifat', sifat);
            DWObject.SetHTTPFormField('lampiran', lampiran);
            DWObject.SetHTTPFormField('perihal', perihal);
            DWObject.SetHTTPFormField('temp_jab', temp_jab);
            DWObject.SetHTTPFormField('scan', 'True');

            if (tatabahasa) {
                DWObject.SetHTTPFormField('tatabahasa', '1');
            }
            if(jenis == "Eksternal"){
               DWObject.SetHTTPFormField('tujuan_nama', tujuan_nama);
               DWObject.SetHTTPFormField('tujuan_kota', tujuan_kota);
               DWObject.SetHTTPFormField('tujuan_alamat', tujuan_alamat);
               DWObject.SetHTTPFormField('tembusan_eks', tembusan_eks);
            } else {
                DWObject.SetHTTPFormField('tujuan', tujuan);
                DWObject.SetHTTPFormField('tembusan', tembusan);
            }

            // Upload all the images in Dynamic Web TWAIN viewer to the HTTP server as a PDF file asynchronously
        console.log('---mengupload-----')
            DWObject.HTTPUploadAllThroughPostAsPDF(
        //    DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
              strHTTPServer,
              strActionPage,
              "temp.pdf",
              OnHttpUploadSuccess,
              OnHttpUploadFailure
            );
        } else {
            $('#dokumen').val('upload');
            submitForm();
        }
    }

    function submitForm(){
        if($("#dokumen").val() == 'upload'){
            console.log('simpan upload');
            // SaveWithFileDialog();
            $("#form-surat").submit();
        }else{
            console.log('simpan scan');
            SaveWithFileDialog();
        }
    }
    function sendGambar(img){
        //    var aa = img.replace('+', '@;');
        var contentType = 'image/tiff';
        var image = img.split('base64,');
        var blob = base64ToBlob(image[1], contentType);
        $.ajax({
            url: "{{route('uploadscan-link')}}",
            type: "POST",
            data: {_token:"{{csrf_token()}}",data:img},
            cache: false,
            contentType: "application/x-www-form-urlencoded",
            success: function (result) {

            }
        });
    }
    function scanToPdfWithThumbnails() {
        scanner.scan(displayImagesOnPage,
            {
                "use_asprise_dialog": false,
                "output_settings": [
                    {
                        "type": "return-base64",
                        "format": "pdf",
                        "pdf_force_black_white": true,
        //                    "pdf_text_line": "By ${USERNAME} on ${DATETIME}"
                    },
                    {
                        "type": "return-base64-thumbnail",
                        "format": "jpg",
                        "thumbnail_height": 200
                    }
                ]
            }
        );
    }
     /** Processes the scan result */
    function displayImagesOnPage(successful, mesg, response) {
        if(!successful) { // On error
            console.error('Failed: ' + mesg);
            return;
        }

        if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
            console.info('User cancelled');
            return;
        }
        //scanner.getSaveResponse(response);
        var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
        //            alert(scannedImages.length);
        for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
            var scannedImage = scannedImages[i];
            processOriginal(scannedImage);
            //                alert(scannedImage.src)
            //                sendGambar(scannedImage.src);
        }

        var thumbnails = scanner.getScannedImages(response, false, true); // returns an array of ScannedImage
        for(var i = 0; (thumbnails instanceof Array) && i < thumbnails.length; i++) {
            var thumbnail = thumbnails[i];
            processThumbnail(thumbnail);
        }
    }
    /** Images scanned so far. */
    var imagesScanned = [];

    /** Processes an original */
    function processOriginal(scannedImage) {
        imagesScanned.push(scannedImage);
    }
    /** Processes a thumbnail */
    function processThumbnail(scannedImage) {
        //            alert(scannedImage.src);
        var elementImg = scanner.createDomElementFromModel( {
            'name': 'img',
            'attributes': {
                'class': 'scanned',
                'name': 'gambar1',
                'src': scannedImage.src
            }
        });
        document.getElementById('images').appendChild(elementImg);
    }
    function submitFormWithScannedImages() {
        if (scanner.submitFormWithImages('form2', imagesScanned, function (xhr) {
            if (xhr.readyState == 4) { // 4: request finished and response is ready
                document.getElementById('server_response').innerHTML = "<h2>Response from the server: </h2>" + xhr.responseText;
                document.getElementById('images').innerHTML = ''; // clear images
                imagesScanned = [];
            }
        })) {
            document.getElementById('server_response').innerHTML = "Submitting, please stand by ...";
        } else {
            document.getElementById('server_response').innerHTML = "Form submission cancelled. Please scan first.";
        }
    }
    function cobasubmit(){
        var http = new XMLHttpRequest();
        //            var url = "https://web-portal.pdam-sby.go.id/bot1.php?action=dump";
        var url = "{{route('uploadscan-link')}}";
        var params = "lorem=ipsum&name=binny";
        var images = imagesScanned;
        var formElement=document.getElementById('form1');
        var fd=new FormData(formElement);
        for(var i=0;i<images.length;i++){
            var image=images[i];
            var abc = image.src.split(';base64,');
            var ext = abc[0].split(':');
            fd.append('extensi',ext[1]);
            fd.append('upload',base64ToBlob(abc[1],image.mimeType));
        }
        http.open("POST", formElement.getAttribute("action"), true);

        //Send the proper header information along with the request
        //            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        http.onreadystatechange = function() {//Call a function when the state changes.
            if(http.readyState == 4 && http.status == 200) {
                //alert(http.responseText);
                window.location.href = "{{route('monitoring-link')}}";
            }
        }
        http.send(fd);
    }
    function base64ToBlob(base64, mime)
    {
        mime = mime || '';
        var sliceSize = 1024;
        var byteChars = window.atob(base64);
        var byteArrays = [];

        for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
            var slice = byteChars.slice(offset, offset + sliceSize);

            var byteNumbers = new Array(slice.length);
            for (var i = 0; i < slice.length; i++) {
                byteNumbers[i] = slice.charCodeAt(i);
            }

            var byteArray = new Uint8Array(byteNumbers);

            byteArrays.push(byteArray);
        }

        return new Blob(byteArrays, {type: mime});
    }
</script>
@endsection