@extends('tenant.layouts.supervisor')

{{-- Tilte Section --}}
@section('title', 'Newsletter Page')

{{-- Style Section --}}
@section('style')
    <!-- include summernote css/js -->
    <link href="{{global_asset('vendor/summernote/summernote-lite.min.css')}}" rel="stylesheet">
    <style>
        .note-editable {
            font-family: 'Serif' !important;


        }
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    <div class="container-fluid">
        <livewire:tenant.supervisor.newsletter.index />
    </div>
@endsection


@section('script')

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="{{global_asset('vendor/summernote/summernote-lite.min.js')}}"></script>
    <script src="{{global_asset('vendor/summernote/summernote-ext-rtl.js')}}"></script>
    <script>

        $('#summernote').summernote({
            fontNames: ['Arial', 'Times New Roman', 'Arial Black','sans-serif','Serif','Monospace','Comic Sans MS','Courier New', 'Helvetica' , 'Impact' ,'Tahoma','Poppins'],
            tabsize: 12,
            height: 400,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear','undo','redo','hr']],
                ['font', ['fontname','fontsize','strikethrough', 'superscript', 'subscript']],
                ['color', ['color']],
                ['para', ['style','ul', 'ol', 'paragraph']],
                ['insert',['ltr','rtl']],
                ['table', ['table']],
                ['height', ['height']],
                ['insert', ['link', 'picture','video']],
                // ['view', ['help']]
            ]
        });
        $('#summernote').summernote('fontName', 'serif');


    </script>

    <script>
        $('#summernote').on('summernote.change', function() {
            Livewire.emit('templateAdded',this.value)
            console.log('Content has changed:', this.value);
        });
    </script>

    <script type="application/javascript">
        $(document).ready(function() {
        window.addEventListener('fillTemplate', event => {
            var $noteEditable = $('.note-editable');
                console.log(event.detail)
                $noteEditable.html(event.detail);
            Livewire.emit('templateAdded',event.detail)


        });});
    </script>


    <script>
        window.addEventListener('close-modal', event => {

            document.getElementById('closeModal').click();
        });

        window.addEventListener('close-group-modal', event => {

            document.getElementById('closeModalGroup').click();
        });

    </script>

@endsection