{% extends '@SonataAdmin/CRUD/base_edit.html.twig' %}

{% block title %}
    Send Direct SMS to {{ object.username }}
{% endblock %}

{% block form %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">
                        <i class="fa fa-paper-plane text-info"></i> Direct Administrative SMS Dispatch Suite
                    </h3>
                </div>
                
                <form action="{{ admin.generateObjectUrl('sendSms', object) }}" method="POST" role="form">
                    <div class="box-body">
                        {# Display quick identity reference details #}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Recipient Client Identity Name:</label>
                                    <input type="text" class="form-control" value="{{ object.firstName }} {{ object.lastName }}" disabled />
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Destination Route Coordinates (Username / Phone):</label>
                                    <input type="text" class="form-control" value="{{ object.phoneNumber|default(object.username) }}" disabled />
                                </div>
                            </div>
                        </div>

                        {# Message Content Entry Layout #}
                        <div class="form-group">
                            <label for="sms-message-body">Message Body Payload Content:</label>
                            
                            {# Interactive Placeholder Injector Toolbar Layout #}
                            <div style="margin-bottom: 8px;">
                                <span style="font-size: 12px; font-weight: bold; margin-right: 8px; color: #555;">
                                    Click to Insert Dynamic Placeholders:
                                </span>
                                <button type="button" 
                                        class="btn btn-xs btn-info btn-flat" 
                                        id="btn-inject-placeholder" 
                                        title="Click to automatically append the client's first name variable placeholder string"
                                        style="font-family: monospace; font-weight: bold;">
                                    <i class="fa fa-user"></i> [First Name]
                                </button>
                            </div>

                            <textarea name="message" 
                                      id="sms-message-body" 
                                      class="form-control" 
                                      rows="6" 
                                      placeholder="Write your custom text communication parameters here... Use the toolbar options above to inject personalized dynamic fields token elements." 
                                      required></textarea>
                            <span class="help-block">
                                <i class="fa fa-info-circle text-warning"></i> The placeholder token <code>[First Name]</code> will automatically translate into <strong>{{ object.firstName|default('the client\'s actual name') }}</strong> at execution runtime pipeline dispatch tracking.
                            </span>
                        </div>
                    </div>

                    <div class="box-footer bg-gray-light">
                        <button type="submit" class="btn btn-success">
                            <i class="fa fa-paper-plane"></i> Send Message
                        </button>
                        <a href="{{ admin.generateUrl('list') }}" class="btn btn-default pull-right">
                            <i class="fa fa-arrow-left"></i> Return to Client Profiles Accounts
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {# JavaScript to inject placeholder at cursor position #}
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            const injectBtn = document.getElementById('btn-inject-placeholder');
            const textarea = document.getElementById('sms-message-body');

            if (injectBtn && textarea) {
                injectBtn.addEventListener('click', function () {
                    const placeholder = '[First Name]';
                    
                    // IE Support tracking loop boundaries
                    if (document.selection) {
                        textarea.focus();
                        const sel = document.selection.createRange();
                        sel.text = placeholder;
                    } 
                    // Standard modern browser string insertion logic
                    else if (textarea.selectionStart || textarea.selectionStart === 0) {
                        const startPos = textarea.selectionStart;
                        const endPos = textarea.selectionEnd;
                        const scrollTop = textarea.scrollTop;
                        
                        textarea.value = textarea.value.substring(0, startPos) + 
                                         placeholder + 
                                         textarea.value.substring(endPos, textarea.value.length);
                        
                        textarea.focus();
                        textarea.selectionStart = startPos + placeholder.length;
                        textarea.selectionEnd = startPos + placeholder.length;
                        textarea.scrollTop = scrollTop;
                    } else {
                        textarea.value += placeholder;
                        textarea.focus();
                    }
                });
            }
        });
    </script>
{% endblock %}