@extends('layouts.app')

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

@section('content')

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

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

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

        <div style="margin-bottom:15px;">
            <label>Signature *</label>
            <textarea name="signature_html" id="signatureEditor" rows="10"
                      style="width:100%;padding:10px;border:1px solid #ccc;">Thanks,<br>
JogaTek</textarea>
        </div>

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

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

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

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

    </div>
</form>

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

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

<script>
let signatureEditorInstance;

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

document.getElementById('signatureForm').addEventListener('submit', function(e) {
    let content = signatureEditorInstance.getData().trim();

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

    document.getElementById('signatureEditor').value = content;
});
</script>

@endsection