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

<div class="container-fluid">
    <div class="wrapper">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h2 class="h4 mb-1">Edit Email</h2>
                <div class="text-muted">
                    <?= esc($studentName !== '' ? $studentName : 'Student') ?> • <?= esc($semester ?? '') ?> • <?= esc($schoolYear ?? '') ?>
                </div>
            </div>
            <a class="btn btn-outline-secondary btn-sm"
               href="<?= site_url('grading/below-60?semester=' . rawurlencode((string)($semester ?? '')) . '&school_year=' . rawurlencode((string)($schoolYear ?? ''))) ?>">
                Back to Below 60
            </a>
        </div>

        <form method="post" action="<?= site_url('grading/below-60/email') ?>" class="card shadow-sm">
            <?= csrf_field() ?>
            <input type="hidden" name="student_id" value="<?= esc((string)($studentId ?? '')) ?>">
            <input type="hidden" name="semester" value="<?= esc((string)($semester ?? '')) ?>">
            <input type="hidden" name="school_year" value="<?= esc((string)($schoolYear ?? '')) ?>">
            <input type="hidden" name="html" id="below60_html" value="<?= htmlspecialchars((string)($html ?? ''), ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">

            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label" for="below60Subject">Subject</label>
                    <input type="text" class="form-control" id="below60Subject" name="subject" value="<?= esc((string)($subject ?? '')) ?>" required>
                </div>
                <div class="mb-3">
                    <label class="form-label" for="below60Editor">Body (Rich Text)</label>
                    <textarea class="form-control" id="below60Editor" rows="14"><?= (string)($html ?? '') ?></textarea>
                    <div class="form-text">Use the toolbar to format the 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">
                    <a class="btn btn-outline-secondary"
                       href="<?= site_url('grading/below-60?semester=' . rawurlencode((string)($semester ?? '')) . '&school_year=' . rawurlencode((string)($schoolYear ?? ''))) ?>">
                        Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">Send Email</button>
                </div>
            </div>
        </form>
    </div>
</div>

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

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

    if (!window.tinymce) return;

    tinymce.init({
        selector: '#below60Editor',
        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() ?>
