@extends('layouts.admin')

@section('title', 'Send Email to users')
@section('heading', 'Send Email to users')

@section('content')
<div class="panel">
    <form class="form" method="POST" action="{{ route('admin.email.send') }}" id="email-form">
        @csrf
        <div class="field">
            <label>Email</label>
            <input type="email" name="email" value="{{ old('email', $email) }}" placeholder="Enter Client Email" required>
        </div>
        <div class="field">
            <label>Greeting/Title</label>
            <input name="greeting" value="{{ old('greeting', $greeting) }}" placeholder="Hello">
        </div>
        <div class="field">
            <label>Subject</label>
            <input name="subject" value="{{ old('subject') }}" placeholder="Subject" required>
        </div>
        <div class="field">
            <label>Message</label>
            <div class="rich-editor">
                <div class="editor-toolbar">
                    <button type="button" data-cmd="undo" title="Undo">↺</button>
                    <button type="button" data-cmd="redo" title="Redo">↻</button>
                    <span class="ed-sep"></span>
                    <button type="button" data-cmd="bold" title="Bold"><b>B</b></button>
                    <button type="button" data-cmd="italic" title="Italic"><i>I</i></button>
                    <button type="button" data-cmd="underline" title="Underline"><u>U</u></button>
                    <button type="button" data-cmd="strikeThrough" title="Strikethrough"><s>S</s></button>
                    <span class="ed-sep"></span>
                    <button type="button" data-cmd="insertUnorderedList" title="Bulleted list">•</button>
                    <button type="button" data-cmd="insertOrderedList" title="Numbered list">1.</button>
                    <button type="button" data-cmd="outdent" title="Outdent">⇤</button>
                    <button type="button" data-cmd="indent" title="Indent">⇥</button>
                    <span class="ed-sep"></span>
                    <button type="button" data-cmd="createLink" title="Link">Link</button>
                    <button type="button" data-cmd="insertImage" title="Image">Image</button>
                    <button type="button" data-cmd="insertHorizontalRule" title="Line">―</button>
                    <span class="ed-sep"></span>
                    <select data-block>
                        <option value="P">Paragraph</option>
                        <option value="H1">Heading 1</option>
                        <option value="H2">Heading 2</option>
                        <option value="H3">Heading 3</option>
                    </select>
                </div>
                <div class="editor-area" contenteditable="true">{!! old('body') !!}</div>
                <textarea name="body" id="email-body" hidden>{{ old('body') }}</textarea>
            </div>
        </div>
        <button class="btn-admin btn-send" type="submit">Send</button>
    </form>
</div>
@endsection

@section('scripts')
<script>
(function () {
    var area = document.querySelector('.editor-area');
    var body = document.getElementById('email-body');
    if (!area || !body) return;
    document.querySelectorAll('.editor-toolbar [data-cmd]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            area.focus();
            var cmd = btn.dataset.cmd;
            if (cmd === 'createLink') {
                var url = prompt('Link URL', 'https://');
                if (url) document.execCommand('createLink', false, url);
                return;
            }
            if (cmd === 'insertImage') {
                var src = prompt('Image URL', 'https://');
                if (src) document.execCommand('insertImage', false, src);
                return;
            }
            document.execCommand(cmd, false, null);
        });
    });
    document.querySelector('[data-block]')?.addEventListener('change', function () {
        area.focus();
        document.execCommand('formatBlock', false, this.value);
    });
    document.getElementById('email-form').addEventListener('submit', function () {
        body.value = area.innerHTML.trim();
        if (!body.value || body.value === '<br>') {
            body.value = '';
        }
    });
})();
</script>
@endsection