@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>Edit Surat Keluar {{$data->perihal}}</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)
                                        <?php $selected=''; ?>
                                        @if($data)
                                            @if($data->referensi_id == $row->recidsurat)
                                                <?php $selected='selected';?>                                            
                                            @endif
                                        @endif
                                        <option {{$selected}} 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 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">
                                    @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 && $data->tujuan_tipe == '1')
                                            @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 class="hr-line-dashed"></div>
                        <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 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">
                                    @foreach ($pembuat as $row)
                                        <?php $selected=''; ?>
                                        @if($data)
                                            @if($data->approval[0]->nip_apprv == trim($row->nip))
                                                <?php $selected='selected';?>                        
                                            @endif
                                        @else
                                            <?php $selected='selected';?>   
                                        @endif
                                        <option {{$selected}} value="{{$row->id.'#'.trim($row->nip)}}">{{$row->nama.' ('.$row->pic.')'}}</option>
                                    @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-3">
                                <input type="file" name="file_lampiran" accept="application/pdf">
                            </div>
                            <div class="col-sm-3">
                                @if(Storage::has($data->recid_suratkeluar . '/lampiran.pdf')){
                                    <a target="_blank" href="{{ url('v2/pdf/' . $data->recid_suratkeluar . '&lampiran.pdf')}}" class="btn btn-xs" type="button">Lihat Lampiran</a>';
                                @endif
                            </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/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">
<!--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>
<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>
    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', '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}}");
            if("{{@$data->tatabahasa}}" == "1"){
                $(".js-switch").attr("checked",true);
            }
        }
        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'
        });
        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, _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', "");
        });
    });
    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');
                }
            });
        });    
    }
</script>
@endsection