@extends('layouts.app')

@section('content')
    <div class="container">
        <h1>Email Template Düzenle</h1>

        <form action="{{ route('email-templates.update', $emailTemplate) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label>Şablon Adı</label>
                <select name="name" id="template-name" class="form-select" required>
                    <option value="">Şablon seçin</option>
                    @foreach(($templateConfig ?? []) as $key => $cfg)
                        <option value="{{ $key }}" {{ (old('name', $emailTemplate->name) === $key) ? 'selected' : '' }}>
                            {{ $key }} @if(!empty($cfg['label'])) - {{ $cfg['label'] }} @endif
                        </option>
                    @endforeach
                </select>
                <small class="text-muted">Konfigürasyonda tanımlı anahtarlar listelenir.</small>
            </div>

            <div class="mb-3">
                <label>Konu</label>
                <input type="text" name="subject" class="form-control" value="{{ old('subject', $emailTemplate->subject) }}" required>
            </div>

            <div class="row">
                <div class="col-md-9">
                    <div class="mb-3">
                        <label>İçerik (HTML)</label>
                        <textarea name="body" id="editor" class="form-control" rows="18" required>{{ old('body', $emailTemplate->body) }}</textarea>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-header">Kullanılabilir Değişkenler</div>
                        <div class="card-body">
                            <div id="variables-list">
                                @if(!empty($availableVariables))
                                    <ul class="list-unstyled">
                                        @foreach($availableVariables as $var)
                                            <li class="mb-2">
                                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 text-start insert-var" data-name="{{ $var['name'] }}">{{ $var['name']}}</button>
                                                @if(!empty($var['description']))
                                                    <div class="small text-muted">{{ $var['description'] }}</div>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="text-muted">Şablon adına göre değişkenler burada gösterilir.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="button" id="preview-btn" class="btn btn-outline-secondary">Önizleme</button>
                <button class="btn btn-primary">Güncelle</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.tiny.cloud/1/mpzqr8aalu6m3dqsf3gnz5uz2y32m9ddba7wao5i44bayn04/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
    <script>
        tinymce.init({
            selector: '#editor',
            height: 600,
            menubar: false,
            plugins: 'lists link table code paste',
            toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright | bullist numlist | link table | code',
            paste_as_text: true,
            valid_elements: '*[*]',
            convert_urls: false,
        });

        const templateConfig = @json($templateConfig ?? []);
        const variablesListEl = document.getElementById('variables-list');
        const templateNameEl = document.getElementById('template-name');

        function hookInsertButtons() {
            document.querySelectorAll('.insert-var').forEach(btn => {
                btn.addEventListener('click', () => {
                    const name = btn.getAttribute('data-name');
                    const placeholder = ``;
                    if (tinymce.activeEditor) {
                        tinymce.activeEditor.execCommand('mceInsertContent', false, placeholder);
                    }
                });
            });
        }

        function renderVariables(name) {
            if (!variablesListEl) return;
            variablesListEl.innerHTML = '';
            if (!name || !templateConfig[name]) {
                variablesListEl.innerHTML = '<p class="text-muted">Geçerli bir şablon adı girildiğinde değişkenler listelenecek.</p>';
                return;
            }
            const vars = templateConfig[name].variables || [];
            if (!vars.length) {
                variablesListEl.innerHTML = '<p class="text-muted">Bu şablon için değişken tanımlı değil.</p>';
                return;
            }
            const list = document.createElement('ul');
            list.className = 'list-unstyled';
            vars.forEach(v => {
                const li = document.createElement('li');
                li.className = 'mb-2';
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-sm btn-outline-secondary w-100 text-start insert-var';
                btn.dataset.name = v.name;
                btn.textContent = '{{ ' + v.name + ' }}';
                btn.title = v.description || '';
                const small = document.createElement('div');
                small.className = 'small text-muted';
                small.textContent = v.description || '';
                li.appendChild(btn);
                li.appendChild(small);
                list.appendChild(li);
            });
            variablesListEl.appendChild(list);
            hookInsertButtons();
        }

        if (templateNameEl) {
            templateNameEl.addEventListener('input', (e) => renderVariables(e.target.value.trim()));
            renderVariables(templateNameEl.value.trim());
        } else {
            hookInsertButtons();
        }

        // Preview in modal (render raw HTML)
        const previewBtn = document.getElementById('preview-btn');
        if (previewBtn) {
            previewBtn.addEventListener('click', () => {
                const html = tinymce.activeEditor ? tinymce.activeEditor.getContent() : document.getElementById('editor').value;
                const iframe = document.getElementById('preview-iframe');
                iframe.srcdoc = html || '<div class="p-3 text-muted">Önizlenecek içerik yok</div>';
                const modal = new bootstrap.Modal(document.getElementById('previewModal'));
                modal.show();
            });
        }
    </script>
@endpush

@push('scripts')
    <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Önizleme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-0" style="height:70vh;">
                    <iframe id="preview-iframe" class="w-100 h-100" style="border:0;"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
                </div>
            </div>
        </div>
    </div>
@endpush