@extends('layouts.app')

@section('title','Compose Email')
@section('page_title','Compose Email')

@section('content')

<form method="POST" action="{{ route('emails.preview') }}" id="emailForm">
    @csrf

    <div style="background:#fff;padding:24px;border-radius:8px;">

        <div style="margin-bottom:15px;">
            <label>To Email</label>
            <input type="email"
               name="to"
               value="{{ $copyEmail->to_email ?? '' }}"
               required
               style="width:100%;padding:10px;border:1px solid #ccc;">
        </div>

        <div style="margin-bottom:15px;">
            <label>Mail Type</label>
            <select name="mail_type" id="mailType" onchange="toggleMailType()" required style="width:100%;padding:10px;border:1px solid #ccc;">
                <option value="custom">Custom Mail</option>
                <option value="template">Select Template</option>
            </select>
        </div>

        <div style="margin-bottom:15px;">
            <label>Signature</label>
            <select name="signature_id" id="signatureSelect" onchange="updateEmailPreview()" style="width:100%;padding:10px;border:1px solid #ccc;">
                <option value="">Default Signature</option>
                <option value="none">No Signature</option>

                @foreach($signatures as $signature)
                    <option value="{{ $signature->id }}" {{ $signature->is_default ? 'selected' : '' }}>
                        {{ $signature->name }} {{ $signature->is_default ? '(Default)' : '' }}
                    </option>
                @endforeach
            </select>
        </div>

        <div id="templateBox" style="display:none;">
            <div style="margin-bottom:15px;">
                <label>Select Template</label>
                <select name="template_id" id="templateSelect" onchange="loadTemplateVariables()" style="width:100%;padding:10px;border:1px solid #ccc;">
                    <option value="">Select Template</option>
                    @foreach($templates as $template)
                        <option value="{{ $template->id }}">{{ $template->template_name }}</option>
                    @endforeach
                </select>
            </div>

            <div id="variablesBox"></div>
        </div>

        <div id="customBox">
            <div style="margin-bottom:15px;">
                <label>Subject</label>
                <input type="text"
                   name="subject"
                   id="subject"
                   value="{{ $copyEmail->subject ?? '' }}"
                   style="width:100%;padding:10px;border:1px solid #ccc;">
            </div>

            <div style="margin-bottom:15px;">
                <label>Message</label>
                <textarea name="message" id="messageEditor" rows="12"
          style="width:100%;padding:10px;border:1px solid #ccc;">{!! $copyEmail->message ?? '' !!}</textarea>
            </div>
        </div>
        <div style="margin-bottom:15px;">
            <label>Campaign</label>

            <select name="email_campaign_id"
                    style="width:100%;padding:10px;border:1px solid #ccc;">
                <option value="">No Campaign</option>

                @foreach($campaigns as $campaign)
                    <option value="{{ $campaign->id }}">
                        {{ $campaign->campaign_name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div id="previewBox" style="display:block;background:#f9fafb;border:1px solid #ddd;padding:20px;border-radius:8px;margin-bottom:20px;">
            <h3 style="font-size:18px;font-weight:bold;margin-bottom:10px;">Email Preview</h3>

            <p><b>Subject:</b> <span id="previewSubject"></span></p>

            <hr style="margin:15px 0;">

            <div id="previewBody" style="background:#fff;padding:15px;border-radius:6px;border:1px solid #e5e7eb;min-height:120px;"></div>
        </div>

        <button type="submit" style="background:#2563eb;color:white;padding:10px 18px;border:0;border-radius:6px;">
            Preview Email
        </button>

    </div>
</form>

<style>
.ck-editor__editable {
    min-height: 420px !important;
}
</style>

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

<script>
let messageEditorInstance;
let selectedTemplateSubject = '';
let selectedTemplateBody = '';

const emailTemplates = @json($templateJson);
const emailSignatures = @json($signatureJson);

ClassicEditor.create(document.querySelector('#messageEditor'))
    .then(editor => {
        messageEditorInstance = editor;
        editor.model.document.on('change:data', () => updateEmailPreview());
        updateEmailPreview();
    });

document.getElementById('subject').addEventListener('input', updateEmailPreview);

function toggleMailType() {
    let type = document.getElementById('mailType').value;

    document.getElementById('templateBox').style.display = type === 'template' ? 'block' : 'none';
    document.getElementById('customBox').style.display = type === 'custom' ? 'block' : 'none';

    if (type === 'template') {
        document.getElementById('subject').required = false;
        document.getElementById('templateSelect').required = true;
        loadTemplateVariables();
    } else {
        document.getElementById('subject').required = true;
        document.getElementById('templateSelect').required = false;
        selectedTemplateSubject = '';
        selectedTemplateBody = '';
        document.getElementById('variablesBox').innerHTML = '';
        updateEmailPreview();
    }
}

function loadTemplateVariables() {
    let template = emailTemplates[document.getElementById('templateSelect').value];

    document.getElementById('variablesBox').innerHTML = '';

    if (!template) {
        selectedTemplateSubject = '';
        selectedTemplateBody = '';
        updateEmailPreview();
        return;
    }

    selectedTemplateSubject = template.subject || '';
    selectedTemplateBody = template.body || '';

    template.variables.forEach(function(variable) {
        let required = variable.is_required ? 'required' : '';

        let html = variable.field_type === 'textarea'
            ? `<div style="margin-bottom:15px;"><label>${variable.label}</label><textarea name="variables[${variable.variable_key}]" data-variable="${variable.variable_key}" ${required} style="width:100%;padding:10px;border:1px solid #ccc;"></textarea></div>`
            : `<div style="margin-bottom:15px;"><label>${variable.label}</label><input type="${variable.field_type}" name="variables[${variable.variable_key}]" data-variable="${variable.variable_key}" ${required} style="width:100%;padding:10px;border:1px solid #ccc;"></div>`;

        document.getElementById('variablesBox').insertAdjacentHTML('beforeend', html);
    });

    updateEmailPreview();
}

function updateEmailPreview() {
    let type = document.getElementById('mailType').value;
    let subject = '';
    let body = '';

    if (type === 'custom') {
        subject = document.getElementById('subject').value || '';
        body = messageEditorInstance ? messageEditorInstance.getData() : '';
    } else {
        subject = selectedTemplateSubject;
        body = selectedTemplateBody;

        document.querySelectorAll('[data-variable]').forEach(function(field) {
            let key = field.dataset.variable;
            let value = field.value && field.value.trim() !== '' ? field.value : '{{' + key + '}}';

            subject = replaceVariable(subject, key, value);
            body = replaceVariable(body, key, value.replace(/\n/g, '<br>'));
        });
    }

    body += getSelectedSignatureHtml();

    document.getElementById('previewSubject').innerText = subject;
    document.getElementById('previewBody').innerHTML = body;
}

function getSelectedSignatureHtml() {
    let signatureId = document.getElementById('signatureSelect').value;

    if (signatureId === 'none') return '';

    if (signatureId && emailSignatures[signatureId]) {
        return '<br><br>' + emailSignatures[signatureId].signature_html;
    }

    let defaultSignature = '';

    Object.values(emailSignatures).forEach(function(signature) {
        if (signature.is_default) {
            defaultSignature = '<br><br>' + signature.signature_html;
        }
    });

    return defaultSignature;
}

function replaceVariable(content, key, value) {
    const regex = new RegExp(
        '\\{\\{\\s*' + key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*\\}\\}',
        'gi'
    );

    return content.replace(regex, value);
}

document.addEventListener('input', function(e) {
    if (e.target && e.target.hasAttribute('data-variable')) {
        updateEmailPreview();
    }
});

document.getElementById('emailForm').addEventListener('submit', function () {
    if (messageEditorInstance) {
        document.getElementById('messageEditor').value = messageEditorInstance.getData();
    }
});
</script>

@endsection