@extends('layouts.app')

@section('title','Add Email Template')
@section('page_title','Add Email Template')

@section('content')

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

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

        <div style="margin-bottom:15px;">
            <label>Template Name *</label>
            <input type="text" name="template_name" required
                   style="width:100%;padding:10px;border:1px solid #ccc;">
        </div>

        <div style="margin-bottom:15px;">
            <label>Subject *</label>
            <input type="text" name="subject" required
                   placeholder="Payment Reminder - @{{project_name}}"
                   style="width:100%;padding:10px;border:1px solid #ccc;">
        </div>

        <div style="margin-bottom:15px;">
            <label>Body *</label>
            <textarea name="body" id="bodyEditor" rows="20"
                      placeholder="Dear @{{client_name}},

Your payment of @{{amount}} is due on @{{due_date}}."
                      style="width:100%;padding:10px;border:1px solid #ccc;"></textarea>
        </div>

        <div style="margin-bottom:15px;">
            <label>
                <input type="checkbox" name="signature_enabled" checked>
                Add Signature
            </label>

            <label style="margin-left:20px;">
                <input type="checkbox" name="status" checked>
                Active
            </label>
        </div>

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

        <h3 style="font-size:18px;font-weight:bold;margin-bottom:15px;">
            Template Variables
        </h3>

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

        <button type="button"
                onclick="addVariable()"
                style="background:#6b7280;color:white;padding:8px 12px;border:0;border-radius:6px;margin-bottom:20px;">
            Add Variable
        </button>

        <br>

        <button type="submit"
                style="background:#16a34a;color:white;padding:10px 18px;border:0;border-radius:6px;">
            Save Template
        </button>

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

    </div>
</form>

<script>
let variableIndex = 0;

function addVariable() {
    let html = `
        <div style="display:grid;grid-template-columns:1fr 1fr 160px 120px 50px;gap:10px;margin-bottom:10px;">
            <input type="text" name="variables[${variableIndex}][variable_key]"
                   placeholder="variable_key e.g. client_name"
                   style="padding:10px;border:1px solid #ccc;">

            <input type="text" name="variables[${variableIndex}][label]"
                   placeholder="Label e.g. Client Name"
                   style="padding:10px;border:1px solid #ccc;">

            <select name="variables[${variableIndex}][field_type]"
                    style="padding:10px;border:1px solid #ccc;">
                <option value="text">Text</option>
                <option value="number">Number</option>
                <option value="date">Date</option>
                <option value="textarea">Textarea</option>
            </select>

            <label style="padding-top:10px;">
                <input type="checkbox" name="variables[${variableIndex}][is_required]" value="1">
                Required
            </label>

            <button type="button" onclick="this.parentElement.remove()"
                    style="background:#dc2626;color:white;border:0;border-radius:4px;">
                X
            </button>
        </div>
    `;

    document.getElementById('variablesBox').insertAdjacentHTML('beforeend', html);
    variableIndex++;
}
</script>

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

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

<script>
let bodyEditorInstance;

ClassicEditor
    .create(document.querySelector('#bodyEditor'))
    .then(editor => {
        bodyEditorInstance = editor;
    })
    .catch(error => {
        console.error(error);
    });

document.getElementById('templateForm').addEventListener('submit', function(e) {
    let bodyContent = bodyEditorInstance.getData().trim();

    if (bodyContent === '') {
        e.preventDefault();
        alert('Body is required.');
        return false;
    }

    document.getElementById('bodyEditor').value = bodyContent;
});
</script>

@endsection