@php
    $editorId = 'anamnesi-' . $user;
@endphp
<div>
    <div class="col-md-12" wire:ignore>
        <div class="form-group">
            <textarea
                id="{{ $editorId }}"
                class="myeditablediv form-control form-control-border"
                placeholder="Inserisci l'anamnesi del cliente..."
            >{{ $this->anamnesi }}</textarea>
        </div>
    </div>

    <div class="row d-flex justify-content-end">
        <button type="button" class="btn btn-warning" onclick="salvaAnamnesi{{ $user }}()">
            <i class="fas fa-save"></i> Salva Anamnesi
        </button>
    </div>

    @script
    <script>
        const editorId = @js($editorId);

        /**
         * Inizializza (o reinizializza) l'editor TinyMCE per l'anamnesi del paziente.
         */
        function initAnamnesiEditor() {
            if (typeof tinymce === 'undefined' || !document.getElementById(editorId)) {
                return;
            }

            if (tinymce.get(editorId)) {
                tinymce.remove('#' + editorId);
            }

            tinymce.init({
                selector: '#' + editorId,
                plugins: 'code table lists',
                toolbar: 'formatting | align| case | font',
                toolbar_groups: {
                    formatting: {
                        icon: 'bold',
                        tooltip: 'Formatting',
                        items: 'bold italic underline | superscript subscript'
                    },
                    align: {
                        icon: 'align-justify',
                        tooltip: 'align',
                        items: 'alignleft aligncenter alignright'
                    },
                    case: {
                        icon: 'format',
                        tooltip: 'Font Case',
                        items: 'H1 H2 H3 H4'
                    },
                    font: {
                        icon: 'change-case',
                        tooltip: 'Font and color',
                        items: 'fontsize forecolor'
                    }
                },
                menubar: false,
                height: 300,
                setup: function (editor) {
                    editor.on('init', function () {
                        editor.setContent(@this.get('anamnesi') || '');
                    });

                    editor.on('blur', function () {
                        @this.set('anamnesi', editor.getContent());
                    });

                    editor.on('change', function () {
                        @this.set('anamnesi', editor.getContent());
                    });

                    editor.on('input', function () {
                        @this.set('anamnesi', editor.getContent());
                    });
                }
            });
        }

        /**
         * Rimuove l'istanza TinyMCE quando il componente viene smontato dal DOM.
         */
        function destroyAnamnesiEditor() {
            if (typeof tinymce !== 'undefined' && tinymce.get(editorId)) {
                tinymce.remove('#' + editorId);
            }
        }

        setTimeout(initAnamnesiEditor, 100);

        window['salvaAnamnesi{{ $user }}'] = function () {
            const editor = tinymce.get(editorId);
            if (editor) {
                @this.call('salvaAnamnesi', editor.getContent());
            }
        };

        $wire.on('anamnesi-saved', () => {
            if (typeof toastr !== 'undefined') {
                toastr.options = {
                    closeButton: false,
                    debug: false,
                    newestOnTop: false,
                    progressBar: true,
                    positionClass: 'toast-top-right',
                    preventDuplicates: false,
                    onclick: null,
                    showDuration: '50',
                    hideDuration: '7000',
                    timeOut: '3000',
                    extendedTimeOut: '2000',
                    showEasing: 'swing',
                    hideEasing: 'linear',
                    showMethod: 'fadeIn',
                    hideMethod: 'fadeOut'
                };
                toastr.success('Anamnesi salvata con successo');
            }
        });

        function registerAnamnesiCleanupHook() {
            Livewire.hook('morph.removing', ({ el }) => {
                if (el.querySelector && el.querySelector('#' + editorId)) {
                    destroyAnamnesiEditor();
                    delete window['salvaAnamnesi{{ $user }}'];
                }
            });
        }

        if (typeof Livewire !== 'undefined') {
            registerAnamnesiCleanupHook();
        } else {
            document.addEventListener('livewire:init', registerAnamnesiCleanupHook);
        }
    </script>
    @endscript
</div>