@extends('layouts.app')

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

        <form action="{{ route('email-templates.store') }}" method="POST">
            @csrf

            <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') === $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') }}" 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') }}</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">
                                <p class="text-muted">Şablon adına göre değişkenler burada gösterilir.</p>
                            </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-success">Kaydet</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');
        const previewBtn = document.getElementById('preview-btn');

        function renderVariables(name) {
            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');
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-sm btn-outline-secondary mb-2 w-100 text-start';
                btn.textContent = '';
                btn.title = v.description || '';
                btn.addEventListener('click', () => {
                    if (tinymce.activeEditor) {
                        tinymce.activeEditor.execCommand('mceInsertContent', false, placeholder);
                    }
                });
                const small = document.createElement('div');
                small.className = 'small text-muted mb-2';
                small.textContent = v.description || '';
                li.appendChild(btn);
                li.appendChild(small);
                list.appendChild(li);
            });
            variablesListEl.appendChild(list);
        }

        templateNameEl.addEventListener('input', (e) => renderVariables(e.target.value.trim()));
        renderVariables(templateNameEl.value.trim());

        // Preview in modal (render raw HTML)
        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