@extends('layouts.app')

@section('title','Send Email Reminder')
@section('page_title','Send Email Reminder')

@section('content')

<form method="POST" action="{{ route('payments.previewEmail',$payment->id) }}" id="emailForm">
    @csrf

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

        <p><b>Project:</b> {{ $payment->project->project_name ?? '-' }}</p>
        <p><b>Payment:</b> {{ $payment->payment_title }}</p>
        <p><b>Amount:</b> {{ $payment->project->currency ?? '' }} {{ $payment->amount }}</p>
        <p><b>Due Date:</b> {{ $payment->due_date }}</p>

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

        <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>To Email</label>
            <input type="email" name="to" required style="width:100%;padding:10px;border:1px solid #ccc;">
        </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 }}
                        @if($signature->is_default)
                            (Default)
                        @endif
                    </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="Payment Reminder - {{ $payment->project->project_name ?? '' }}"
                       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;">Dear Client,<br><br>
This is a gentle reminder regarding pending payment.<br><br>
Project: {{ $payment->project->project_name ?? '-' }}<br>
Payment: {{ $payment->payment_title }}<br>
Amount: {{ $payment->project->currency ?? '' }} {{ $payment->amount }}<br>
Due Date: {{ $payment->due_date }}<br><br>
Please clear the payment at your earliest convenience.</textarea>
            </div>
        </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>

        <a href="{{ route('payments.reminders') }}" 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', function() {
    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';
    document.getElementById('previewBox').style.display = 'block';

    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);
    });

    bindVariableEvents();
    updateEmailPreview();
}

function bindVariableEvents() {
    document.querySelectorAll('[data-variable]').forEach(function(field) {
        field.addEventListener('input', updateEmailPreview);
        field.addEventListener('keyup', updateEmailPreview);
        field.addEventListener('change', updateEmailPreview);
    });
}

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

    let subject = '';
    let body = '';

    if (mailType === 'custom') {
        subject = document.getElementById('subject').value || '';

        body = messageEditorInstance
            ? messageEditorInstance.getData()
            : document.getElementById('messageEditor').value;
    } 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