@extends('adminlte::page')

@section('title', 'Gestione moduli')

@section('content_header')
    <h1>Gestione moduli</h1>
@stop

@section('content')
<div class="container-fluid">
    @livewire('admin.moduli.gestione')
</div>
@endsection

@section('js')
<script src="{{ URL::asset('/js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script>
    // L'editor vive fuori dal DOM gestito da Livewire (wire:ignore) e sincronizza contenutoHtml.
    document.addEventListener('livewire:init', () => {
        Livewire.on('modulo-editor-load', ({ html }) => {
            setTimeout(() => {
                tinymce.remove('#modulo-editor');
                tinymce.init({
                    selector: '#modulo-editor',
                    height: 500,
                    plugins: 'code table lists',
                    toolbar: 'undo redo | blocks | bold italic underline | alignleft aligncenter alignright | bullist numlist | table | code',
                    setup: (editor) => {
                        editor.on('init', () => editor.setContent(html || ''));
                        editor.on('change input', () => {
                            const component = Livewire.find(document.getElementById('modulo-editor').closest('[wire\\:id]').getAttribute('wire:id'));
                            component.set('contenutoHtml', editor.getContent(), false);
                        });
                    },
                });
            }, 0);
        });
    });

    function inserisciPlaceholder(token) {
        const editor = tinymce.get('modulo-editor');
        if (editor) {
            editor.insertContent(token);
            editor.fire('change');
        }
    }
</script>
@endsection