@extends('livewire.forms.input-template')
<div>
    @section('auto-update')
        @parent
        <div wire:ignore>
            <textarea class="form-control mce-{{ $input->id }}" rows="3">{{ $input->value }}</textarea>
        </div>
    @overwrite

    @section('pending')
        @parent
        <div wire:ignore>
            <textarea class="form-control mce-{{ $input->id }}" rows="3"> {{ $input->value }}</textarea>
        </div>
        @php $tinymce=true @endphp
        @yield('tinymce-js')
    @overwrite

    @section('render')
        <div>
            {!! $input->value !!}
        </div>
    @overwrite

</div>
@script
<script>
    tinymce.init({
        selector: '.mce-{{$input->id}}',
        height: (window.innerHeight - 300),
        promotion: false,
        setup: function(editor) {
            editor.on('init change', function() {
                editor.save();
            });
            editor.on('change', function(e) {
                console.log(editor.getContent());
                @this.set('inputsData.{{$key}}.{{$input->id}}.value', editor.getContent());
            });
        },
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help wordcount'
        ],
        toolbar: 'insert | undo redo |  formatselect | bold italic backcolor  | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
        content_css: [
            '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
            '//www.tinymce.com/css/codepen.min.css'
        ]
    })
</script>
@endscript