@extends('layout.main_layout')
@section('content')
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12 {{($data) ? 'hidden' : ''}}" id="data">
            <div class="col-md-12">
                <button class="btn btn-info dim" type="button" id="btnTambah">
                    <i class="fa fa-plus"></i> &nbsp;Buat Template Surat
                </button>
            </div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Data Template Surat</h5>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover dataTables-example" id="tabel">
                            <thead>
                                <tr>
                                    <th>Nama Template</th>
                                    <th>Nama Template</th>
                                    <th>Menu</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12 {{($data) ? '' : 'hidden'}}" id="form">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Template Surat</h5>
                </div>
                <div class="ibox-content">
                     <form method="post" action="{{route('v2:template-simpan')}}" class="form-horizontal" id="form-template">
                        <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 or ''}}">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">Nama Template Surat</label>
                            <div class="col-sm-6">
                                <input type="text" name="nama" class="form-control" value="{{$data->nama or ''}}">
                            </div>
                        </div>
                        <hr class="hr-line-dashed">
                        <!-- <h3>Isi Surat</h3> -->
                        <!--<input type="text" name="jml" class="hidden" value="1">-->
                        <div class="form-group" id="grp1">
                            <label class="col-sm-2 control-label">Bagian 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 class="form-group">
                            <div class="col-sm-2 col-sm-offset-2">
                                <button class="btn btn-primary col-sm-12" id="simpan" type="button">Simpan</button>
                            </div>
                            <div class="col-sm-2">
                                <a href="{{route('v2:template-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')
<!-- Data Tables -->
<link href="{{asset('css/plugins/dataTables/dataTables.bootstrap.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/dataTables/dataTables.responsive.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/dataTables/dataTables.tableTools.min.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/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')
<!-- Data Tables -->
<script src="{{asset('js/plugins/dataTables/jquery.dataTables.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.responsive.js')}}"></script>
<script src="{{asset('js/plugins/dataTables/dataTables.tableTools.min.js')}}"></script>
<script src="{{asset('js/plugins/sweetalert/sweetalert.min.js')}}"></script>

<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>
    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 template = Handlebars.compile($("#details-template").html());
    var table = $('#tabel').DataTable({        
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('v2:template-data') }}",
        "columns": [            
            {data: 'recid', name: 'recid', class: 'hidden'},
            {data: 'nama', name: 'nama'},
            {data: 'action', orderable: false, searchable: false}
        ],
        "order": [0, 'desc']
    });
    
    
    $('#btnTambah').click(function () {
        $("#data").addClass('hidden');
        $("#form").removeClass('hidden');
    });
    $('#preview').click(function () {
        $("#form-template").attr('action', "{{route('v2:template-preview')}}").attr('target', "_blank").submit();
    });

    $('#simpan').click(function () {
        $("#form-template").attr('action', "{{route('v2:template-simpan')}}").attr('target', "").submit();
    });


});

function hapus(recid) {
    swal({
        title: "Apakah Anda yakin?",
        text: "Anda akan menghapus template surat ini.",
        type: "error",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Hapus!",
        cancelButtonText: "Tidak",
        closeOnConfirm: true
    },
    function () {
        $.ajax({
            url: "{{route('v2:template-hapus')}}",
            type: "POST",
            data: {
                '_token': '{{csrf_token()}}',
                'recid': recid
            },
            success: function (result) {
                $('#tabel').DataTable().ajax.reload();
            }
        });
    });
}

</script>
@endsection