@section('title', 'Messaging')
@section('heading', 'Messaging')
@section('top-menu-items')
    <x-partials.top-menu-item name="Messaging" route="messaging" />
@endsection
<div>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">

        <!-- Nav Tabs -->
        <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
            @foreach($templates as $index => $template)
                <li class="nav-item">
                    <button class="nav-link {{ $index == $activeTabIndex ? 'show active' : '' }}" 
                        id="tab-{{ $index }}" 
                        data-bs-toggle="tab" 
                        data-bs-target="#id-{{ $index }}" 
                        type="button" 
                        role="tab" 
                        aria-controls="id-{{ $index }}" 
                        aria-selected="{{ $index == $activeTabIndex ? 'true' : 'false' }}">
                        {{ $template['name'] ?? 'Template ' . ($index + 1) }}
                    </button>
                </li>
            @endforeach
        </ul>

        <!-- Tab Content -->
        <div class="tab-content">
            @foreach ($templates as $index => $template)
                <div class="tab-pane fade p-7 {{ $index == $activeTabIndex ? 'show active' : '' }}"
                    id="id-{{ $index }}" 
                    role="tabpanel" 
                    aria-labelledby="tab-{{ $index }}">
                    
                    <div class="mb-4">
                        <label class="form-label fw-bold mb-2">Subject</label>
                        <input type="text" wire:model.defer="templates.{{ $index }}.subject" class="form-control">
                    </div>

                    <div class="mb-4">
                        <label class="form-label fw-bold mb-2">Body</label>
                        
                        <!-- TinyMCE Editor Container -->
                        <div class="editor-wrapper" wire:ignore>
                            <textarea 
                                id="tinymce-editor-{{ $index }}" 
                                class="tinymce-editor"
                                data-index="{{ $index }}"
                            >{!! $template['body'] !!}</textarea>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mb-4">
                        <button wire:click="saveTemplate({{ $index }})" class="btn btn-primary" wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="saveTemplate({{ $index }})">
                                <i class="bi bi-save me-1"></i> Save Changes
                            </span>
                            <span wire:loading wire:target="saveTemplate({{ $index }})">
                                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                Saving...
                            </span>
                        </button>
                    </div>

                    <!-- Test Email Section -->
                    <div class="card shadow-sm">
                        <div class="card-header bg-light">
                            <h5 class="card-title mb-0">
                                <i class="bi bi-envelope me-2"></i>Send Test Email
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="testEmail-{{ $index }}" class="form-label">Test Email Address</label>
                                <input 
                                    type="email" 
                                    id="testEmail-{{ $index }}"
                                    wire:model.defer="testEmails.{{ $index }}" 
                                    class="form-control @error('testEmails.' . $index) is-invalid @enderror" 
                                    placeholder="Enter email address to test this template"
                                >
                                @error('testEmails.' . $index)
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <button 
                                wire:click="sendTestEmail({{ $index }})" 
                                class="btn btn-primary" 
                                wire:loading.attr="disabled"
                                wire:target="sendTestEmail({{ $index }})"
                            >
                                <span wire:loading.remove wire:target="sendTestEmail({{ $index }})">
                                    <i class="bi bi-send me-1"></i> Send Test Email
                                </span>
                                <span wire:loading wire:target="sendTestEmail({{ $index }})">
                                    <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                                    Sending...
                                </span>
                            </button>
                            <small class="text-muted d-block mt-2">
                                <i class="bi bi-info-circle me-1"></i>
                                This will send a test email with placeholder data replacing template variables.
                            </small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>
</div>

@push('styles')
<style>
    /* Editor wrapper */
    .editor-wrapper {
        min-height: 450px;
        border: 1px solid #e4e6ef;
        border-radius: 0.475rem;
        overflow: hidden;
    }
    
    /* TinyMCE specific fixes */
    .tox-tinymce {
        border: none !important;
        border-radius: 0 !important;
    }
    
    .tox .tox-edit-area__iframe {
        background-color: #fff !important;
    }
    
    /* Card styling */
    .card {
        border: 1px solid #e4e6ef;
    }
    
    .card-header {
        border-bottom: 1px solid #e4e6ef;
        padding: 1rem 1.25rem;
    }
    
    /* Tab content padding */
    .tab-pane {
        background: #fff;
        border-radius: 0.475rem;
    }
    
    /* Form labels */
    .form-label {
        color: #3f4254;
    }
</style>
@endpush

@push('scripts')
<script src="/assets/plugins/custom/tinymce/tinymce.bundle.js"></script>

<script>
(function() {
    // Configuration
    const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content || '';
    const UPLOAD_URL = '/upload-image';
    
    // Store editor instances
    window.tinymceEditors = window.tinymceEditors || {};
    
    // Store Livewire component reference
    let livewireComponent = null;
    
    // Store current active tab to preserve it during updates
    let currentActiveTab = null;
    
    // Variables for template
    const templateVariables = @json($variables);
    
    // Initialize when DOM is ready
    document.addEventListener('DOMContentLoaded', function() {
        livewireComponent = @this;
        
        // Track active tab
        trackActiveTab();
        
        // Add click handlers to tab buttons to track active tab
        document.querySelectorAll('.nav-link[data-bs-toggle="tab"]').forEach(function(tabButton) {
            tabButton.addEventListener('shown.bs.tab', function(e) {
                const tabId = e.target.id;
                const match = tabId.match(/tab-(\d+)/);
                if (match) {
                    currentActiveTab = parseInt(match[1]);
                    // Update Livewire component
                    if (livewireComponent) {
                        livewireComponent.set('activeTabIndex', currentActiveTab);
                    }
                }
            });
        });
        
        initializeAllEditors();
    });
    
    // Re-initialize after Livewire updates (if needed)
    document.addEventListener('livewire:load', function() {
        livewireComponent = @this;
        trackActiveTab();
    });
    
    // Preserve active tab before Livewire updates
    document.addEventListener('livewire:before-update', function() {
        preserveActiveTab();
    });
    
    // Restore active tab after Livewire updates
    document.addEventListener('livewire:updated', function() {
        // Small delay to ensure DOM is ready
        setTimeout(function() {
            restoreActiveTab();
            initializeAllEditors();
        }, 50);
    });
    
    // Also listen for morph updates
    Livewire.hook('morph.updated', function() {
        setTimeout(function() {
            restoreActiveTab();
        }, 50);
    });
    
    function trackActiveTab() {
        // Find currently active tab
        const activeTab = document.querySelector('.nav-link.active');
        if (activeTab) {
            const tabId = activeTab.id;
            const match = tabId.match(/tab-(\d+)/);
            if (match) {
                currentActiveTab = parseInt(match[1]);
            }
        }
    }
    
    function preserveActiveTab() {
        trackActiveTab();
    }
    
    function restoreActiveTab() {
        if (currentActiveTab !== null) {
            // Update Livewire component's activeTabIndex
            if (livewireComponent) {
                livewireComponent.set('activeTabIndex', currentActiveTab);
            }
            
            // Also update Bootstrap tabs
            setTimeout(function() {
                const tabButton = document.getElementById('tab-' + currentActiveTab);
                const tabPane = document.getElementById('id-' + currentActiveTab);
                
                if (tabButton && tabPane) {
                    // Remove active from all tabs
                    document.querySelectorAll('.nav-link').forEach(function(link) {
                        link.classList.remove('active', 'show');
                        link.setAttribute('aria-selected', 'false');
                    });
                    
                    document.querySelectorAll('.tab-pane').forEach(function(pane) {
                        pane.classList.remove('active', 'show');
                    });
                    
                    // Activate the correct tab
                    tabButton.classList.add('active', 'show');
                    tabButton.setAttribute('aria-selected', 'true');
                    tabPane.classList.add('active', 'show');
                    
                    // Trigger Bootstrap tab event if needed
                    const tab = new bootstrap.Tab(tabButton);
                    tab.show();
                }
            }, 50);
        }
    }
    
    function initializeAllEditors() {
        const textareas = document.querySelectorAll('.tinymce-editor');
        
        textareas.forEach(function(textarea) {
            const editorId = textarea.id;
            const index = textarea.dataset.index;
            
            // Skip if already initialized
            if (tinymce.get(editorId)) {
                return;
            }
            
            initializeEditor(editorId, index);
        });
    }
    
    function initializeEditor(editorId, index) {
        tinymce.init({
            selector: '#' + editorId,
            height: 420,
            menubar: 'file edit view insert format tools table',
            plugins: 'lists link image table code fullscreen preview',
            toolbar: [
                'undo redo | blocks | bold italic underline strikethrough | forecolor backcolor',
                'alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link image table | code fullscreen | insertvariable'
            ],
            toolbar_mode: 'wrap',
            content_style: `
                body { 
                    font-family: Arial, Helvetica, sans-serif; 
                    font-size: 14px; 
                    line-height: 1.6;
                    padding: 10px;
                }
                img { 
                    max-width: 100%; 
                    height: auto; 
                    display: block;
                    margin: 10px auto;
                }
                table {
                    border-collapse: collapse;
                    width: 100%;
                }
                table td, table th {
                    border: 1px solid #ddd;
                    padding: 8px;
                }
            `,
            branding: false,
            promotion: false,
            statusbar: true,
            resize: true,
            relative_urls: false,
            remove_script_host: false,
            convert_urls: true,
            
            // Image upload settings
            automatic_uploads: true,
            images_reuse_filename: true,
            file_picker_types: 'image',
            
            // Custom image upload handler
            images_upload_handler: function(blobInfo, success, failure, progress) {
                uploadImage(blobInfo, success, failure, progress);
            },
            
            // File picker for images
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype === 'image') {
                    const input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    
                    input.onchange = function() {
                        const file = this.files[0];
                        if (!file) return;
                        
                        uploadFile(file, function(url) {
                            callback(url, { title: file.name });
                        }, function(error) {
                            alert('Image upload failed: ' + error);
                        });
                    };
                    
                    input.click();
                }
            },
            
            // Setup callback
            setup: function(editor) {
                // Store reference
                window.tinymceEditors[index] = editor;
                
                // Add custom variable insert button
                editor.ui.registry.addMenuButton('insertvariable', {
                    text: 'Variables',
                    icon: 'template',
                    fetch: function(callback) {
                        const items = templateVariables.map(function(variable) {
                            return {
                                type: 'menuitem',
                                text: variable,
                                onAction: function() {
                                    editor.insertContent(variable);
                                }
                            };
                        });
                        callback(items);
                    }
                });
                
                // Sync content to Livewire on change
                editor.on('change keyup', function() {
                    syncContentToLivewire(editor, index);
                });
                
                // Sync on blur
                editor.on('blur', function() {
                    syncContentToLivewire(editor, index);
                });
                
                // Handle init complete
                editor.on('init', function() {
                    console.log('TinyMCE editor initialized for index: ' + index);
                });
            },
            
            // Error handling
            init_instance_callback: function(editor) {
                // Editor is fully initialized
                console.log('Editor ready: ' + editor.id);
            }
        }).catch(function(error) {
            console.error('TinyMCE initialization failed:', error);
        });
    }
    
    function uploadImage(blobInfo, success, failure, progress) {
        const formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        
        const xhr = new XMLHttpRequest();
        xhr.open('POST', UPLOAD_URL);
        xhr.setRequestHeader('X-CSRF-TOKEN', CSRF_TOKEN);
        xhr.setRequestHeader('Accept', 'application/json');
        
        xhr.upload.onprogress = function(e) {
            if (progress && e.lengthComputable) {
                progress(e.loaded / e.total * 100);
            }
        };
        
        xhr.onload = function() {
            if (xhr.status < 200 || xhr.status >= 300) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            
            try {
                const json = JSON.parse(xhr.responseText);
                
                if (!json || !json.location) {
                    failure('Invalid response from server');
                    return;
                }
                
                success(json.location);
            } catch (e) {
                failure('Invalid JSON response: ' + e.message);
            }
        };
        
        xhr.onerror = function() {
            failure('Upload failed. Please try again.');
        };
        
        xhr.send(formData);
    }
    
    function uploadFile(file, success, failure) {
        const formData = new FormData();
        formData.append('file', file);
        
        fetch(UPLOAD_URL, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': CSRF_TOKEN,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(function(response) {
            if (!response.ok) {
                throw new Error('HTTP Error: ' + response.status);
            }
            return response.json();
        })
        .then(function(data) {
            if (data.location) {
                success(data.location);
            } else {
                failure(data.error || 'Upload failed');
            }
        })
        .catch(function(error) {
            failure(error.message);
        });
    }
    
    function syncContentToLivewire(editor, index) {
        if (livewireComponent) {
            // Preserve active tab before syncing
            preserveActiveTab();
            
            const content = editor.getContent();
            
            // Update Livewire property - this will trigger a morph update
            // But we'll restore the tab after
            livewireComponent.set('templates.' + index + '.body', content);
            
            // Also ensure activeTabIndex is preserved
            if (currentActiveTab !== null) {
                livewireComponent.set('activeTabIndex', currentActiveTab);
            }
        }
    }
    
    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        tinymce.remove();
    });
    
    // Expose function for manual re-initialization if needed
    window.reinitializeTinyMCE = initializeAllEditors;
})();
</script>
@endpush