hubtel_sms/views/hubtel_sms/modals/bulk_sms.php

<!-- Bulk SMS Modal -->
<div class="modal fade" id="bulk_sms_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><?php echo _l('bulk_sms'); ?></h4>
            </div>
            <?php echo form_open(admin_url('hubtel_sms/send_bulk_sms'), ['id' => 'bulk-sms-form']); ?>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <!-- Client Groups Selection -->
                        <div class="form-group">
                            <label for="client_groups"><?php echo _l('client_groups'); ?></label>
                            <select class="form-control selectpicker" name="client_groups[]" id="client_groups" 
                                    multiple data-width="100%" data-live-search="true" data-actions-box="true">
                                <?php foreach($client_groups as $group) { ?>
                                    <option value="<?php echo $group['id']; ?>">
                                        <?php echo $group['name']; ?>
                                    </option>
                                <?php } ?>
                            </select>
                        </div>

                        <!-- Template Selection -->
                        <div class="form-group">
                            <label for="bulk_template_id"><?php echo _l('template'); ?></label>
                            <select class="form-control selectpicker" name="template_id" id="bulk_template_id">
                                <option value=""><?php echo _l('none'); ?></option>
                                <?php foreach($templates as $template) { ?>
                                    <option value="<?php echo $template['id']; ?>">
                                        <?php echo $template['name']; ?>
                                    </option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <!-- Message Content -->
                        <div class="form-group">
                            <label for="bulk_message">
                                <?php echo _l('message'); ?>
                                <small class="pull-right">
                                    <span id="bulk_char_count">0</span>/160 <?php echo _l('characters'); ?> |
                                    <span id="bulk_parts_count">1</span> <?php echo _l('message_parts'); ?>
                                </small>
                            </label>
                            <textarea class="form-control" id="bulk_message" name="message" 
                                      rows="8" maxlength="160" required></textarea>
                        </div>
                    </div>
                </div>

                <!-- Recipients Preview -->
                <div class="row mtop15">
                    <div class="col-md-12">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h4 class="panel-title"><?php echo _l('recipients_preview'); ?></h4>
                                    </div>
                                    <div class="col-md-6 text-right">
                                        <span class="label label-info">
                                            <span id="recipients_count">0</span> <?php echo _l('recipients'); ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body" id="recipients_preview" style="max-height: 200px; overflow-y: auto;">
                                <!-- Will be populated via AJAX -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cost Estimate -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-info">
                            <i class="fa fa-info-circle"></i>
                            <?php echo _l('estimated_cost'); ?>: 
                            <strong id="cost_estimate">0.00</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <i class="fa fa-times"></i> <?php echo _l('close'); ?>
                </button>
                <button type="submit" class="btn btn-info" id="sendBulkSmsBtn">
                    <i class="fa fa-paper-plane"></i> <?php echo _l('send'); ?>
                </button>
            </div>
            <?php echo form_close(); ?>
        </div>
    </div>
</div>

<script>
    
    // Bulk SMS Functions
function bulk_sms_modal() {
    $('#bulk_sms_modal').modal('show');
    resetBulkSmsForm();
}

function resetBulkSmsForm() {
    var form = $('#bulk-sms-form')[0];
    form.reset();
    $('#client_groups').selectpicker('val', '');
    $('#bulk_template_id').selectpicker('val', '');
    updateBulkCharCount();
    $('#recipients_preview').html('');
    $('#recipients_count').text('0');
    $('#cost_estimate').text('0.00');
}

// Initialize bulk SMS features
$(function() {
    // Initialize selectpicker
    $('.selectpicker').selectpicker();

    // Handle client groups selection
    $('#client_groups').on('change', function() {
        var selectedGroups = $(this).val();
        if (!selectedGroups) {
            resetRecipientsPreview();
            return;
        }

        $.get(admin_url + 'hubtel_sms/get_recipients_preview', {
            groups: selectedGroups
        }).done(function(response) {
            if (response.success) {
                $('#recipients_preview').html(response.html);
                $('#recipients_count').text(response.count);
                updateCostEstimate();
            }
        });
    });

    // Handle bulk template selection
    $('#bulk_template_id').on('change', function() {
        var templateId = $(this).val();
        if (templateId) {
            $.get(admin_url + 'hubtel_sms/get_template/' + templateId).done(function(response) {
                if (response.success) {
                    $('#bulk_message').val(response.template.template);
                    updateBulkCharCount();
                }
            });
        }
    });

    // Handle bulk message character count
    $('#bulk_message').on('keyup', function() {
        updateBulkCharCount();
    });

    // Handle bulk form submission
    $('#bulk-sms-form').on('submit', function(e) {
        e.preventDefault();
        
        if (!confirm(app.lang.bulk_sms_confirm)) {
            return false;
        }

        var $btn = $('#sendBulkSmsBtn');
        var formData = $(this).serialize();

        $btn.prop('disabled', true)
            .html('<i class="fa fa-spinner fa-spin"></i> ' + app.lang.sending);

        $.post($(this).attr('action'), formData)
            .done(function(response) {
                if (response.success) {
                    alert_float('success', response.message);
                    $('#bulk_sms_modal').modal('hide');
                    location.reload();
                } else {
                    alert_float('danger', response.message);
                }
            })
            .fail(function() {
                alert_float('danger', app.lang.something_went_wrong);
            })
            .always(function() {
                $btn.prop('disabled', false)
                    .html('<i class="fa fa-paper-plane"></i> ' + app.lang.send);
            });
    });
});

function updateBulkCharCount() {
    var chars = $('#bulk_message').val().length;
    $('#bulk_char_count').text(chars);
    $('#bulk_parts_count').text(Math.ceil(chars / 160));
    updateCostEstimate();
}

function updateCostEstimate() {
    var recipientCount = parseInt($('#recipients_count').text()) || 0;
    var messageCount = Math.ceil($('#bulk_message').val().length / 160) || 1;
    var rate = parseFloat(app.options.sms_rate) || 0.03; // Default rate if not set
    var totalCost = (recipientCount * messageCount * rate).toFixed(2);
    $('#cost_estimate').text(app.currency_symbol + totalCost);
}

function resetRecipientsPreview() {
    $('#recipients_preview').html('');
    $('#recipients_count').text('0');
    $('#cost_estimate').text('0.00');
}
</script>