{{-- Extends layout --}}
@extends('layout.default')
@section('styles')
<style type="text/css">
#tinymce {
    border: 1px solid #999 !important;
}
.tox-notifications-container {
    display: none !important;
}
#character_count
{
    width: 10%;
    float: left;
}
</style>
@endsection
{{-- Content --}}
@section('content')
<div class="d-flex flex-row">
<div class="flex-row-fluid ml-lg-8">
<div class="card card-custom">
    <div class="card-header py-3">
        <div class="card-title align-items-start flex-column">
            <h3 class="card-label font-weight-bolder text-dark">{{ empty($letter)?'Create':'Edit' }}
                Letter
            </h3>
        </div>
    </div>
    {!! Form::open(['url' => $page->form_url, 'method' => $page->form_method, 'class'=>'ajax-submit','id'=>'staff-form']) !!}
    <div class="card-body">
        <div class="form-group row">
            <label class="col-xl-3 col-lg-3 col-form-label text-alert">Letter Type</label>
            <div class="col-lg-9 col-xl-6">
                {!! Form::text('name', $letter->name ?? '', ['class' => 'form-control form-control-lg form-control-solid mb-2','placeholder'=>'Letter Type']) !!}
                @error('name')
                <div class="fv-plugins-message-container">
                    <div id="name-error" class="fv-help-block">{{ $message }}</div>
                </div>
                @enderror                            
            </div>
        </div>
        <div class="form-group row">
            <label class="col-xl-3 col-lg-3 col-form-label text-alert">Trigger</label>
            <div class="col-lg-9 col-xl-6">
                <select name="triggers" id="triggers" class="form-control form-control-lg form-control-solid">
                    <option value="">Select Trigger Type</option>
                    @foreach ($triggers as $key => $trigger)
                    <option 
                    value="{{$key}}" 
                    @if (isset($letter->triggers) && $key == $letter->triggers) selected @endif
                    @if (in_array($key, $exists)) disabled @endif
                    >
                    {{$trigger}}
                    </option>
                    @endforeach
                </select>
                @error('triggers')
                <div class="fv-plugins-message-container">
                    <div id="triggers-error" class="fv-help-block">{{ $message }}</div>
                </div>
                @enderror 
            </div>
        </div>
        <div class="form-group row">
            <label class="col-xl-3 col-lg-3 col-form-label">Content</label>
            <div class="col-lg-9 col-xl-9">
                <textarea name="content" id="mytextarea">@if(isset($letter->content)) {!! $letter->content !!} @endif</textarea>
                <div id="character_count"> </div>
                <div id="word_count"> </div>
                <div class="card-toolbar">
                    <button type="submit" class="btn btn-success mr-2">Save Changes</button>
                    <button type="reset" class="btn btn-secondary">Cancel</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{ asset('tinymce.min.js')}}"></script>
{{-- <script src="https://cdn.tiny.cloud/1/wn71pmh97t5mye55g1axm2jrs84jihnac3869s9qfw3pavug/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> --}}
<script type = "text/javascript"> 
window.onload = function () {
    tinymce.init({
        selector: '#mytextarea',
        width: 758,
        height: 545,
        content_style: "body p { line-height: 1 !important;font-size:14px;margin-bottom:0px !important;font-family:Helvetica;font-weight:500;margin-block-start: 0px !important;margin-block-end: 0px !important; }",
        body_class: "my_class",
        menubar: false,
        toolbar: false,
        content_css: "/mycontent.css",
        paste_text_sticky_default: true,
        setup: function (ed) {
            var max = 24;
             var maxChars = 2950;
            ed.on('keyup', function (keyup_event) {
               
                var keyPressed = keyup_event.which;
                var ctrl = keyup_event.ctrlKey ? keyup_event.ctrlKey : ((keyPressed === 17) ? true : false);
                if (keyPressed !== 8 || keyPressed !== 46 || (keyPressed != 86 && ctrl)) {
                    var editor = tinymce.get('mytextarea');
                    var content = editor.getContent();
                    var count = CountLines();
                    var charCounts =  CountCharacters();
                    if (count > max || charCounts > maxChars) {
                        // alert("Maximum " + max + " lines allowed.");   
                        toastr.error("Maximum " + max + " lines or " +maxChars+ " characters allowed.");
                        editor.setContent(content);
                    }
                    document.getElementById("character_count").innerHTML = "Lines: " + count;
                    document.getElementById("word_count").innerHTML = "Characters: " + charCounts;
                }
            });
            ed.on('paste', function (e) {
                var editor = tinymce.get('mytextarea');
                var clipboardData, pastedData;
                var type = 'paste';
                clipboardData = e.clipboardData || window.clipboardData;
                pastedData = clipboardData.getData('text/plain');
                var ccount = pastedData.split(/\r\n|\r|\n/).length;
                var count = CountLines();
                var charCounts =  CountCharacters();
                var totCount = ccount + count;
                if (totCount > max || charCounts > maxChars) {
                    // alert("Maximum " + max + " lines allowed.You are trying to paste " +ccount+ " lines of content!");
                    toastr.error("Maximum " + max + " lines or " +maxChars+ " characters allowed.You are trying to paste " + ccount + " lines and " +charCounts+  "characters of content!");
                    e.preventDefault();
                }
            });

            function CountLines() {
                var ed = tinymce.get('mytextarea');
                var tcontent = (tinyMCE.activeEditor.getContent());
                regex = /<p/igm,
                counts = tcontent.match(regex),
                counts = (counts) ? counts.length : 0;
                return counts;
            }

            function CountCharacters() {
                var ed = tinymce.get('mytextarea');
               count = $(ed.getBody()).text().length;
               //alert(count);
                return count;
            }
        }
    });
} 
</script>
@endsection