@section('js')
    <script src="{{ URL::asset('/js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
@stop

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Dettagli Articolo</h3>
                </div>
                

                    <div class="card-body">
                        @if (session()->has('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <div class="form-group">
                            <label for="title">Titolo</label>
                            <input 
                                type="text" 
                                class="form-control @error('title') is-invalid @enderror" 
                                wire:model="title" 
                                placeholder="Inserisci il titolo dell'articolo"
                            >
                            @error('title')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="category_id">Categoria</label>
                            <div class="input-group">
                                <select 
                                    class="form-control @error('category_id') is-invalid @enderror" 
                                    wire:model="category_id"
                                >
                                    <option value="">Seleziona una categoria</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category['id'] }}">
                                            {{ $category['name'] }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="input-group-append">
                                    <button 
                                        type="button" 
                                        class="btn btn-primary" 
                                        data-toggle="modal" 
                                        data-target="#categoriaModal"
                                        title="Aggiungi Nuova Categoria"
                                    >
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                                @error('category_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group" wire:ignore>
                            <label for="content">Contenuto</label>
                            <textarea 
                                id="markdown-editor"
                                wire:model="content"
                                class="form-control myeditablediv @error('content') is-invalid @enderror" 
                                rows="10" 
                                placeholder="Scrivi il contenuto del tuo articolo"
                            ></textarea>
                            @error('content')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="image">Immagine di Copertina</label>
                            <div class="custom-file">
                                <input 
                                    type="file" 
                                    class="custom-file-input @error('image') is-invalid @enderror" 
                                    wire:model="image" 
                                    id="customFile"
                                >
                                <label class="custom-file-label" for="customFile">
                                    @if($image) 
                                        {{ $image->getClientOriginalName() }} 
                                    @else 
                                        Scegli un'immagine 
                                    @endif
                                </label>
                            </div>
                            @error('image')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="published_at">Data di Pubblicazione</label>
                            <input 
                                type="datetime-local" 
                                class="form-control" 
                                wire:model="published_at"
                            >
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary" wire:click="saveArticle">
                            <i class="fas fa-save"></i> Salva Articolo
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="categoriaModal" tabindex="-1" role="dialog" aria-labelledby="categoriaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                @livewire('articoli.crea-categoria')
            </div>
        </div>
    </div>
</div>




@script
<script>
    // Rendi la funzione globale
    window.initTinyMCE = function() {
        console.log('Inizializzazione TinyMCE avviata');
        
        // Verifica che TinyMCE sia disponibile
        if (typeof tinymce !== 'undefined') {
            console.log('TinyMCE è disponibile');
            
            // Rimuovi eventuali istanze precedenti
            if (tinymce.get('markdown-editor')) {
                console.log('Rimozione istanza precedente');
                tinymce.get('markdown-editor').remove();
            }

            // Inizializza TinyMCE
            tinymce.init({
                selector: '#markdown-editor',
                language: 'it',
                plugins: [
                    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 
                    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                    'insertdatetime', 'media', 'table', 'help', 'wordcount', 'formatting'
                ],
                toolbar: 'undo redo | ' +
                    'fontsizeinput forecolor fontfamily |bold italic | alignleft aligncenter alignright alignjustify | ' +
                    'bullist numlist outdent indent | image | removeformat | help',
                height: 300,
     
                images_upload_url: '{{ route('articles.upload') }}',
                images_upload_handler: function(blobInfo, success, failure) {
                    console.log('Inizio caricamento immagine', blobInfo);
                    
                    // Debug dei callback
                    console.log('Callback types:', {
                        success: typeof success,
                        failure: typeof failure
                    });

                    // Wrapper espliciti per i callback
                    const safeSuccess = function(url) {
                        console.log('Chiamata safeSuccess con URL:', url);
                        if (typeof success === 'function') {
                            success(url);
                            
                            // Inserisci l'immagine nel contenuto dell'editor
                            const editor = tinymce.activeEditor;
                            if (editor) {
                                // Inserisci l'immagine centrata e responsive
                                const imgHtml = `<img src="${url}" alt="Immagine caricata" class="img-fluid mx-auto d-block" style="max-width: 100%; height: auto;">`;
                                
                                // Ottieni il contenuto corrente
                                const currentContent = editor.getContent();
                                
                                // Inserisci l'immagine all'inizio del contenuto
                                const newContent = imgHtml + currentContent;
                                
                                // Imposta il nuovo contenuto
                                editor.setContent(newContent);
                                
                                // Aggiorna il modello Livewire
                                @this.set('content', newContent);
                                
                                console.log('Immagine inserita nel contenuto');
                            }
                        } else {
                            console.error('Callback success non è una funzione');
                        }
                    };

                    const formData = new FormData();
                    formData.append('image', blobInfo.blob(), blobInfo.filename());

                    fetch('{{ route('articles.upload') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: formData
                    })
                    .then(response => {
                        console.log('Risposta ricevuta:', response);
                        if (!response.ok) {
                            throw new Error('Errore di rete: ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(result => {
                        console.log('Risultato caricamento:', result);
                        if (result.location) {
                            safeSuccess(result.location);
                        }
                    })
                    .catch(error => {
                        console.error('Errore completo:', error);
                        // Rimuovo la chiamata a failure per evitare popup
                        console.log('Errore durante il caricamento:', error.message);
                    });

                    // Fallback per gestire casi estremi
                    return {
                        status: true,
                        message: 'Upload in corso'
                    };
                },
                automatic_uploads: true,
                file_picker_types: 'image',
                image_title: true,
                image_dimensions: true,
                image_advtab: true,
                image_class_list: [
                    {title: 'Nessuna classe', value: ''},
                    {title: 'Immagine Responsive', value: 'img-fluid'},
                    {title: 'Immagine Thumbnail', value: 'img-thumbnail'}
                ],
                setup: function(editor) {
                    console.log('Configurazione TinyMCE iniziata');
                    console.log('Editor inizializzato',editor);    
                    // Forza la conversione in punti
                //    editor.getBody().style.fontSize = '16pt';
                  
                    // Imposta il contenuto iniziale quando l'editor è pronto
                    editor.on('init', function() {
                      editor.getBody().style.fontSize = '14pt';

                        // Ottieni il contenuto iniziale da Livewire
                        const initialContent = @this.get('content');
                        console.log('Contenuto iniziale:', initialContent);
                        
                        // Imposta il contenuto nell'editor
                        if (initialContent) {
                            // Verifica se ci sono immagini nel contenuto
                            const tempDiv = document.createElement('div');
                            tempDiv.innerHTML = initialContent;
                            const images = tempDiv.getElementsByTagName('img');
                            
                            // Se non ci sono immagini, prova a ripristinare il contenuto originale
                            if (images.length === 0) {
                                // Controlla se il testo contiene un URL di immagine
                                const imageUrlMatch = initialContent.match(/https?:\/\/[^\s]+\.(jpg|jpeg|png|gif)/i);
                                
                                if (imageUrlMatch) {
                                    const imageUrl = imageUrlMatch[0];
                                    const imgHtml = `<img src="${imageUrl}" alt="Immagine caricata" class="img-fluid mx-auto d-block" style="max-width: 100%; height: auto;">`;
                                    editor.setContent(imgHtml + initialContent);
                                } else {
                                    editor.setContent(initialContent);
                                }
                            } else {
                                // Se ci sono immagini, imposta il contenuto normalmente
                                editor.setContent(initialContent);
                            }
                        }
                    });
                    editor.on('blur', () => {
                        const content = editor.getContent();
                        console.log('Contenuto modificato:', content);
                        @this.set('content', content);
                    });

                    // Aggiorna il contenuto di Livewire quando l'editor cambia
                    editor.on('input', () => {
                        const content = editor.getContent();
                        console.log('Contenuto modificato:', content);
                        @this.set('content', content);
                    });
                }
            });
        } else {
            console.error('TinyMCE non è stato caricato correttamente');
            // Ritenta l'inizializzazione dopo un breve ritardo
            setTimeout(window.initTinyMCE, 1000);
        }
    };

    // Inizializza TinyMCE quando la pagina è pronta
    document.addEventListener('livewire:initialized', () => {
        console.log('Livewire inizializzato');
        window.initTinyMCE();
    });

    // Reinizializza TinyMCE dopo ogni aggiornamento di Livewire
    document.addEventListener('livewire:update', () => {
        console.log('Livewire aggiornato');
        window.initTinyMCE();
    });

    // Gestore evento categoria creata
    $wire.on('categoria-creata', (categoria) => {
        @this.caricaCategorie(categoria.id);

        setTimeout(() => {
            const selectCategoria = document.querySelector('select[wire\\:model="category_id"]');
            
            const newOption = Array.from(selectCategoria.options).find(
                option => option.value == categoria.id
            );

            if (newOption) {
                selectCategoria.value = categoria.id;
                @this.set('category_id', categoria.id);
            }

            $('#categoriaModal').modal('hide');
        }, 100);
    });
</script>
@endscript