@extends('layouts.app')

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

@section('content')

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

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

        <div style="margin-bottom:15px;">
            <label>Emails</label>
            <textarea name="emails"
              rows="8"
              required
              style="width:100%;padding:10px;border:1px solid #ccc;">{{ $prefillEmails ?? '' }}</textarea>
        </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"
                       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;"></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 Bulk Email
        </button>

        <a href="{{ route('email.history') }}" style="margin-left:10px;color:#2563eb;">
            Back
        </a>

    </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();
    })
    .catch(error => {
        console.error(error);
    });

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 templateId = document.getElementById('templateSelect').value;
    let template = emailTemplates[templateId];

    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 = '';

        if (variable.field_type === 'textarea') {
            html = `
                <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>
            `;
        } else {
            html = `
                <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.addEventListener('change', 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