@extends('layouts.app')

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

@section('content')

<form method="POST" action="{{ route('email-templates.update',$emailTemplate->id) }}">
    @csrf
    @method('PUT')

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

        <div style="margin-bottom:15px;">
            <label>Template Name *</label>
            <input type="text"
                   name="template_name"
                   value="{{ old('template_name',$emailTemplate->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"
                   value="{{ old('subject',$emailTemplate->subject) }}"
                   required
                   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"
              style="width:100%;padding:10px;border:1px solid #ccc;">{{ old('body', $emailTemplate->body ?? '') }}
            </textarea>
        </div>

        <div style="margin-bottom:15px;">
            <label>
                <input type="checkbox"
                       name="signature_enabled"
                       {{ $emailTemplate->signature_enabled ? 'checked' : '' }}>
                Add Signature
            </label>

            <label style="margin-left:20px;">
                <input type="checkbox"
                       name="status"
                       {{ $emailTemplate->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">

            @foreach($emailTemplate->variables as $index => $variable)

                <div style="display:grid;grid-template-columns:1fr 1fr 160px 120px 50px;gap:10px;margin-bottom:10px;">

                    <input type="text"
                           name="variables[{{ $index }}][variable_key]"
                           value="{{ $variable->variable_key }}"
                           placeholder="variable_key"
                           style="padding:10px;border:1px solid #ccc;">

                    <input type="text"
                           name="variables[{{ $index }}][label]"
                           value="{{ $variable->label }}"
                           placeholder="Label"
                           style="padding:10px;border:1px solid #ccc;">

                    <select name="variables[{{ $index }}][field_type]"
                            style="padding:10px;border:1px solid #ccc;">
                        @foreach(['text','number','date','textarea'] as $type)
                            <option value="{{ $type }}" @selected($variable->field_type == $type)>
                                {{ ucfirst($type) }}
                            </option>
                        @endforeach
                    </select>

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

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

                </div>

            @endforeach

        </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;">
            Update Template
        </button>

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

    </div>
</form>

<script>
let variableIndex = {{ $emailTemplate->variables->count() }};

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