@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-12">
        <a onclick="show_images();" class="btn btn-info pull-right">{{translate('View S3 Images')}}</a>
    </div>
</div>

<br>
<div class="col-sm-12">
    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">{{translate('Create Email Template')}}</h3>
            <a href="{{route('newsletters.template')}}" class="btn btn-info pull-right" style="margin-top: -40px;">{{translate('Back')}}</a>
        </div>
        <!--Horizontal Form-->
        <!--===================================================-->
        <form class="form-horizontal" action="{{ route('newsletters.template.add') }}" method="POST" enctype="multipart/form-data">
        	@csrf
            <div class="panel-body">
                
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="name">{{translate('Template Name')}}</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="name" id="name" required>
                    </div>
                </div>
                <div class="form-group" id="addDiv">
                    <label class="col-sm-2 control-label" for="name">{{translate('content')}}</label>
                    <div class="col-sm-10" id="editor">
                        <textarea id="newsletter-editor" name="content" required></textarea>
                    </div>
                </div>
            </div>
            <div class="panel-footer text-right">
                <button class="btn btn-purple" type="submit">{{translate('Save')}}</button>
            </div>
        </form>
        <!--===================================================-->
        <!--End Horizontal Form-->

    </div>
</div>
<div class="modal fade" id="show_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" id="modal-content">

        </div>
    </div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.js"></script>
<script type="text/javascript">
        function show_images(){
            $.get('{{ route('newsletters.template.images') }}',{_token:'{{ @csrf_token() }}'}, function(data){
                $('#show_modal #modal-content').html(data);
                $('#show_modal').modal('show', {backdrop: 'static'});
            });
        }

        var editorJodit = new Jodit('#newsletter-editor', {
        showCharsCounter: true,
        showWordsCounter: true,
       
        askBeforePasteFromWord: false,
       
        defaultActionOnPasteFromWord : 'insert_as_text',
        tabIndex: 0,
        theme: "summer",
        height: 500,
        hotkeys: {
            redo: 'ctrl+z',
            undo: 'ctrl+y,ctrl+shift+z',
            indent: 'ctrl+]',
            outdent: 'ctrl+[',
            bold: 'ctrl+b',
            italic: 'ctrl+i',
            removeFormat: 'ctrl+shift+m',
            insertOrderedList: 'ctrl+shift+7',
            insertUnorderedList: 'ctrl+shift+8',
            openSearchDialog: 'ctrl+f',
            openReplaceDialog: 'ctrl+r',
        }
    });

    editorJodit.events.on('beforePaste', (event) => {
        const target = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
        const pastedText = target.getData('text/plain') || target.getData('text/html');
        console.log("beforePaste");
        if (pastedText.indexOf('data:image') !== -1 || pastedText.indexOf('src="data:image"') !== -1 || pastedText.indexOf('base64') !== -1) {
            return false;
        }
    });

    editorJodit.events.off('processPaste.paste').on('processPaste.paste', (event, text, type) => {
        if (text && /.*\<img.*src=".*base64.*[\S\n\r\s]*">.*/g.test(text)) {
            return text.replace(/\<img.*src=".*base64.*[\S\n\r\s]*">/g, '');
        }else {
            return text;
        }
    });

    $('.emailtemplate').on('change',function(){
        var id = this.value;
       
        if(id == "1"){
            $("#addDiv").hide();
            $("#frameDiv").show();
        }else{
           $("#subject").val("");
           $("#frameDiv").hide();
           $("#addDiv").show();
        }   
        $('#editor').remove();
        $('#addDiv').append('<textarea id="newsletter-editor-content" name="content" required style="width: 800px; height: 200px;"></textarea>');
        $.post('{{ route('email.template.get') }}', {_token:'{{ csrf_token() }}', id:id}, function(data){
            if(data.code == 200){
                $("#subject").val(data.name);
                $("#newsletter-editor-content").html(data.content);
            }
        });

    });

</script>
@endsection