{# templates/Admin/BulkSms/broadcast.html.twig #}
{% extends base_template %}

{% block title %}System Bulk Broadcaster Dashboard Workspace{% endblock %}

{% block navbar_title %}
    {{ block('title') }}
{% endblock %}

{% block content %}
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fa fa-bullhorn text-primary"></i> Create System-Wide Broadcast Campaign</h3>
        </div>

        <form action="{{ admin.generateUrl('broadcast') }}" method="POST" role="form">
            <div class="box-body">

                <div class="form-group col-md-6">
                    <label for="sender_id">Sender ID / Mask Signature <span class="text-danger">*</span></label>
                    <input type="text" name="sender_id" id="sender_id" class="form-group form-control" maxlength="11" value="Ntem SMS" required placeholder="e.g. Ntem SMS">
                    <p class="help-block">Must be a whitelisted numeric or alphanumeric mask up to 11 characters.</p>
                </div>

                <div class="form-group col-md-6">
                    <label for="medium">Routing Channel Medium</label>
                    <input type="text" name="medium" id="medium" class="form-group form-control" value="BROADCAST_SMS">
                </div>

                <div class="form-group col-md-12">
                    <label style="display:block;">Dynamic Placeholder Snippets Injection Toolbar</label>
                    {# PLACEHOLDER INTERACTIVE LINK BUTTON #}
                    <button type="button" class="btn btn-default btn-sm btn-flat" id="insert-firstname-btn" style="border: 1px dashed #3c8dbc; color: #3c8dbc; font-weight: bold;">
                        <i class="fa fa-user"></i> + Insert Client First Name Block
                    </button>
                    <p class="help-block" style="margin-top: 5px;">Clicking this inserts <code>{first_name}</code> where your input cursor is resting inside the text body workspace area container box.</p>
                </div>

                <div class="form-group col-md-12">
                    <label for="message_body">Message Body Payload Template Text <span class="text-danger">*</span></label>
                    <textarea name="message_body" id="message_body" rows="6" class="form-control" style="font-size: 14px; resize: vertical;" required placeholder="Hello {first_name}, thank you for your ongoing patronage..."></textarea>
                    <div class="help-block text-right" id="character-counter" style="font-weight: bold; font-family: monospace;">
                        Characters: 0 | Pages: 0
                    </div>
                </div>

            </div>

            <div class="box-footer">
                <button type="submit" class="btn btn-success btn-flat" onclick="return confirm('Are you sure you want to initialize dispatch routines to ALL active customers registered in the database platform right now?');">
                    <i class="fa fa-paper-plane"></i> Send Message
                </button>
            </div>
        </form>
    </div>

    {# INTERACTIVE CODES INJECTION SCRIPT #}
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            const textarea = document.getElementById('message_body');
            const insertBtn = document.getElementById('insert-firstname-btn');
            const counterDiv = document.getElementById('character-counter');

            // Text Cursor Placeholder Positioning Engine
            insertBtn.addEventListener('click', function () {
                const placeholder = '{first_name}';
                const startPos = textarea.selectionStart;
                const endPos = textarea.selectionEnd;
                const originalText = textarea.value;

                // Split and insert placeholder at current cursor index position
                textarea.value = originalText.substring(0, startPos) + placeholder + originalText.substring(endPos, originalText.length);

                // Re-focus caret cursor tracking position safely immediately past the injected snippet text pathing
                textarea.focus();
                textarea.selectionStart = textarea.selectionEnd = startPos + placeholder.length;
                updateCounter();
            });

            // Dynamic GSM Text Multi-Page Layout Calculator
            function updateCounter() {
                const length = textarea.value.length;
                const pages = length <= 160 ? (length === 0 ? 0 : 1) : Math.ceil(length / 153);
                counterDiv.innerText = `Characters: ${length} | Calculated SMS Pages: ${pages}`;
            }

            textarea.addEventListener('input', updateCounter);
        });
    </script>
{% endblock %}