@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="form-group">
                            <label class="col-sm-2 control-label">Pilih Template</label>
                            <div class="col-sm-6">
                                <select class="form-control" 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-6">
                                <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>
                        <h3>Header Surat</h3>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Jenis Surat Keluar</label>
                            <div class="col-sm-6">
                                <select class="form-control" name="jenis" id="jenis">
                                    <option value="Internal">Internal</option>
                                    <option value="Eksternal">Eksternal</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Sifat</label>
                            <div class="col-sm-6">
                                <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">Nomor Surat</label>
                            <div class="col-sm-6">
                                <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">Lampiran Surat</label>
                            <div class="col-sm-6">
                                <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">Perihal</label>
                            <div class="col-sm-6">
                                <input type="text" name="perihal" class="form-control" value="{{ $data->perihal or '' }}">
                            </div>
                        </div>
                        <div class="form-group" id="data_1">
                            <label class="col-sm-2 control-label">Tanggal</label>
                            <div class="col-sm-6">
                                <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="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-6">
                                    <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-6">
                                    <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-6">
                                    <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 Surat</label>
                                <div class="col-sm-6">
                                    <select name="tujuan" data-placeholder="Pilih Personal" class="form-control chosen-select">
                                        <option value="">--Pilih Tujuan--</option>
                                        @foreach ($jabatan as $row)
                                            <?php $selected=''; ?>
                                            @if($data)
                                                @if($data->tujuan_jab == $row->recidjabatan)
                                                    <?php $selected='selected';?>                                            
                                                @endif
                                            @endif
                                        <option {{$selected}} value="{{'0#'.$row->recidjabatan.'#'.trim($row->pic->nip)}}">{{$row->namajabatan.' ('.$row->pic->nama.')'}}</option>
                                        @endforeach
                                        @foreach ($pegawai as $row)
                                            <?php $selected=''; ?>
                                            @if($data)
                                                @if($data->tujuan_nip == trim(str_replace('.','',$row->nip)))
                                                    <?php $selected='selected';?>                                            
                                                @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-6">
                                    <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-6">
                                    <input type="text" name="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-6">
                                    <select name="tembusan[]" id="select-tembusan" multiple data-placeholder="Pilih Tembusan" class="form-control chosen-select">
                                        @foreach ($tembusan as $row)
                                            <?php $selected=''; ?>
                                            @if($data)
                                                @foreach($data->tembusan as $baris)
                                                    @if($baris->jab_tembusan == $row->recidjabatan)
                                                    <?php $selected='selected';?>                                            
                                                    @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-6">
                                <select name="fontsize" class="form-control">
                                    @foreach ($fontsize as $row)
                                        <?php $selected=''; ?>
                                        @if($data)
                                            @if($data->fontsize == $row)
                                                <?php $selected='selected'; ?>                        
                                            @endif
                                        @else
                                            @if($row == '10.5')
                                                <?php $selected='selected'; ?>                        
                                            @endif  
                                        @endif
                                        <option {{$selected}} value="{{$row}}">{{$row}}</option>
                                    @endforeach                                    
                                </select>
                            </div>
                        </div>
                        <hr class="hr-line-dashed">
                        <!-- <h3>Isi Surat</h3> -->
                        <!--<input type="text" name="jml" class="hidden" value="1">-->
                        <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>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Tata Bahasa</label>
                            <div class="col-sm-6">
                                <input type="checkbox" class="js-switch" name="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-6">
                                <select name="pembuat" id="select-pembuat" data-placeholder="Pembuat Surat" class="form-control chosen-select">
                                    <?php $n = 0; ?>
                                    @foreach ($pembuat as $row)
                                        <?php $val=$row->id.'#'.trim($row->nip);$teks=$row->nama.' ('.$row->pic.')'; ?>
                                        <option {{($n == (count($pembuat)-1)) ? 'selected' : ''}} value="{{$val}}">{{$teks}}</option> 
                                        <?php $n++; ?>                                   
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Upload Lampiran</label>
                            <div class="col-sm-6">
                                <input type="file" name="file_lampiran" accept="application/pdf">
                            </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="submit">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>
                    </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')}}">
@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>
<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 () {
            $("#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);
            }
        })
    });
    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-6">' +
                                    '<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');
        }
    }
</script>
@endsection