    <div class="col-md-3">
        <?php echo (isset($tabs) ? $tabs : null);?>
    </div>
    <div class="col-md-9">
        <?php echo (isset($message) ? $message : null);?>

        <?php
        if (!empty($unpaid_invoices) && is_array($unpaid_invoices)) {
            $num_invoices = count($unpaid_invoices);
        ?>
        <div class="alert alert-warning">
            <p><?php $this->_('ClientServices.!warning.invoices_upgrade_package');?></p>
            <p><a id="upgrade_pay_invoices" class="btn btn-warning" href="<?php echo ($num_invoices == 1 ? $this->base_uri . 'pay/method/' . (isset($unpaid_invoices[0]->id) ? $unpaid_invoices[0]->id : null) : '#');?>"><i class="fas fa-exclamation-triangle fa-fw"></i> <?php $this->_('ClientServices.upgrade.btn_make_payment');?></a></p>
        </div>
        <?php
        }

        $this->WidgetClient->clear();
        $this->WidgetClient->create($this->_('ClientServices.upgrade.boxtitle', true, (isset($service->package->name) ? $service->package->name : null), (isset($service->name) ? $service->name : null)), ['id' => 'client_upgrade_service'], (isset($render_section) ? $render_section : null));
        $this->WidgetClient->startBody();
        $this->Form->create(null, ['id' => 'upgrade_service', 'class' => 'disable-on-submit']);
        ?>

        <div class="form-group">
            <p><?php $this->_('ClientServices.upgrade.text_prorate');?></p>
            <?php $this->Form->label($this->_('ClientServices.upgrade.field_current_package', true));?>
            <p><?php (print (isset($current_term) ? $this->Html->safe($current_term) : null));?></p>
        </div>
        <div class="form-group">
            <?php
            $this->Form->label($this->_('ClientServices.upgrade.field_pricing_id', true), 'pricing_id');
            $this->Form->fieldSelect('pricing_id', (isset($terms) ? $terms : null), '', ['id' => 'pricing_id', 'class' => 'form-control']);
            ?>
        </div>

        <div id="package_options" class="mb-2"></div>

        <div class="float-right">
            <a href="<?php echo $this->Html->safe($this->base_uri . 'services/manage/' . (isset($service->id) ? $service->id : null) . '/');?>" class="btn btn-danger">
                <i class="fas fa-ban fa-fw"></i> <?php $this->_('ClientServices.upgrade.field_cancel');?>
            </a>
            <?php
            if (empty($unpaid_invoices)) {
            ?>
            <button type="submit" class="btn btn-light"><i class="fas fa-arrow-circle-right"></i> <?php $this->_('ClientServices.upgrade.field_submit');?></button>
            <?php
            }
            ?>
        </div>
        <?php
        $this->Form->end();
        $this->WidgetClient->endBody();
        $this->WidgetClient->end();
        ?>
    </div>
    <?php
    // Make a payment
    if (!empty($unpaid_invoices) && isset($num_invoices) && $num_invoices > 1) {
        $currency = $unpaid_invoices[0]->currency;

        $this->Form->create($this->base_uri . 'pay/index/' . (isset($currency) ? $currency : null), ['id' => 'upgrade_make_payment']);

        foreach ($unpaid_invoices as $invoice) {
            // Must all be in the same currency
            if ($invoice->currency != $currency) {
                continue;
            }

            $this->Form->fieldHidden('invoice_id[]', (isset($invoice->id) ? $invoice->id : null));
            $this->Form->fieldHidden('applyamount[' . (isset($invoice->id) ? $invoice->id : null) . ']', $this->CurrencyFormat->format((isset($invoice->due) ? $invoice->due : 0), $currency, ['prefix' => false,'suffix' => false,'with_separator' => false,'code' => false]));
        }

        $this->Form->end();
        ?>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#upgrade_pay_invoices').click(function(e) {
                    e.stopPropagation();
                    $('#upgrade_make_payment').submit();
                });
            });
        </script>
        <?php
    }
    ?>

<script type="text/javascript">
    $(document).ready(function() {
        $('#pricing_id').change(function() {
            packageOptions();
        });

        function packageOptions() {
            var pricing_id = $('#pricing_id').val();
            if (pricing_id) {
                var params = $('[name^="configoptions"]', $('#change_service_term')).serialize();
                $(this).blestaRequest(
                    'GET',
                    '<?php echo $this->Html->safe($this->base_uri . 'services/packageoptions/' . (isset($service->id) ? $service->id : null) . '/');?>' + pricing_id,
                    params,
                    function(data) {
                        if (data) {
                            if (data.hasOwnProperty('html')) {
                                $('#package_options').html(data.html);
                            }

                            if (data.hasOwnProperty('limit_reached')) {
                                $('button[type=submit]').prop('disabled', data.limit_reached);
                            }
                        }

                        $(this).blestaBindServiceOptionSlider();
                    },
                    null,
                    {dataType: 'json'}
                );
            }
            else {
                $('#package_options').html('');
            }
        }
    });
</script>