<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container my-4">
  <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div>
      <h2 class="h4 mb-1">Compose Email</h2>
      <?php if (!empty($name)): ?>
        <div class="text-muted"><?= esc($name) ?></div>
      <?php endif; ?>
    </div>
    <a class="btn btn-outline-secondary btn-sm" href="<?= esc((string)($return_url ?? site_url('family'))) ?>">Back</a>
  </div>

  <form class="card shadow-sm" method="post" action="<?= site_url('family/compose-email/send') ?>">
    <?= csrf_field() ?>
    <input type="hidden" name="html" id="compose_html" value="">
    <input type="hidden" name="return_url" value="<?= esc((string)($return_url ?? '')) ?>">

    <div class="card-body">
      <div class="mb-3">
        <label class="form-label" for="composeTo">To</label>
        <input type="email" class="form-control" id="composeTo" name="to" value="<?= esc((string)($to ?? '')) ?>" placeholder="parent@example.com" required>
      </div>
      <div class="mb-3">
        <label class="form-label" for="composeSubject">Subject</label>
        <input type="text" class="form-control" id="composeSubject" name="subject" placeholder="Subject" required>
      </div>
      <div class="mb-3">
        <label class="form-label" for="composeEditor">Body (Rich Text)</label>
        <textarea class="form-control" id="composeEditor" rows="14"></textarea>
        <div class="form-text">Use the toolbar to format your message before sending.</div>
        <noscript>
          <div class="alert alert-warning mt-2">
            JavaScript is disabled. The message will be sent from the hidden <code>html</code> field.
          </div>
        </noscript>
      </div>
      <div class="d-flex justify-content-end gap-2">
        <button type="submit" class="btn btn-primary">Send Email</button>
      </div>
    </div>
  </form>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script src="<?= base_url('assets/tinymce/tinymce.min.js') ?>"></script>
<script>
(function () {
  const form = document.querySelector('form[action$="family/compose-email/send"]');
  const hiddenHtml = document.getElementById('compose_html');

  tinymce.init({
    selector: '#composeEditor',
    base_url: '<?= base_url('assets/tinymce') ?>',
    suffix: '.min',
    license_key: 'gpl',
    height: 420,
    menubar: true,
    branding: false,
    promotion: false,
    plugins: 'advlist autolink lists link image charmap preview anchor ' +
             'searchreplace visualblocks code fullscreen insertdatetime media table ' +
             'help wordcount emoticons codesample',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough forecolor backcolor | ' +
             'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ' +
             'link image media table | emoticons codesample | removeformat | preview code',
    convert_urls: false,
    paste_data_images: true,
    image_caption: true,
    content_style: 'body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }',
    setup(editor) {
      editor.on('keyup change undo redo SetContent', function () {
        if (hiddenHtml) hiddenHtml.value = editor.getContent({ format: 'html' });
      });
      if (form) {
        form.addEventListener('submit', function () {
          if (hiddenHtml) hiddenHtml.value = editor.getContent({ format: 'html' });
        });
      }
    }
  });
})();
</script>
<?= $this->endSection() ?>
