{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
<style>
.table-condensed{
    background:#fff;
}
.card-custom{
    margin-top: 25px;
}
#newbtn
{
    background: #B52555;
}
#newbtn button
{
    color: #fff;
}
#addCampaign
{
 background: #B52555;
 color: #fff;
}
#tinymce {
    border: 1px solid #999 !important;
}
.tox-notifications-container {
    display: none !important;
}
#character_count
{
    width: 10%;
    float: left;
}
</style>
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid">     
        <div class="container">       
            <div class="container py-8 ph-1">
                <div class="row">
                    <div class="container">
                        <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                            <div class="alert-text head-text">
                                 {{ empty($letter)?'Create':'Edit' }}
                            Letter
                            </div>
                        </div>
                        <div class="card card-custom new-property">
                            <div class="card-body ">
                                <div class="col-xs-12">
                                    <div class="">                                        
                                         {!! 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','required']) !!}
                            {!! Form::hidden('letter_type',2 ?? '', ['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" required="true">
                                <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>
                            {{-- {!! Form::select('triggers', $triggers , $letter->triggers ?? '' , ['class' => 'form-control form-control-lg form-control-solid','placeholder'=>'Select Trigger Type']) !!} --}}
                            @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>
                    </div>
                    <div class="card-toolbar">
                        <button type="submit" class="btn btn-success">Save Changes</button>
                        <button type="reset" class="btn btn-secondary" id="btn_cancel">Cancel</button>
                    </div>
                    {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

{{-- @if (config('layout.page-loader.type') != '')
    @include('layout.partials._page-loader')
@endif --}}

{{-- Global Config (global config for global JS scripts) --}}
{{--<script>--}}
{{--    var KTAppSettings = {--}}
{{--    !!json_encode(config('layout.js'), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)!!--}}
{{--    };--}}
{{--</script>--}}

{{-- Global Theme JS Bundle (used by all pages)  --}}
{{-- @foreach(config('layout.resources.js') as $script)
    <script src="{{ asset($script) }}" type="text/javascript"></script>
@endforeach
<script src="{{ asset('js/pages/widgets.js')}}"></script>
<script src="{{ asset('js/pages/custom/profile/profile.js')}}"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="{{ asset('js/developer/ajax-crud.js') }}"></script>
<script src="{{ asset('plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
<script src="{{ asset('js/pages/crud/forms/editors/ckeditor-classic.js') }}"></script> --}}
@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"> 
$(document).on('click','#btn_cancel' , function(e){        
        window.location.href = "{{  url('probate-letters') }}";    
});
window.onload = function () {
    tinymce.init({
        selector: '#mytextarea',
        branding: false,
        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();console.log(charCounts);
                    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