<?php
$externNumber = new ExternalNumber();
$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'external-number-grid',
    'dataProvider' => $externNumber->search($model->id),
    'enableHistory' => false,
    'type' => 'striped bordered condensed', //change color from columns in 'white' and 'grey' responsively
    'itemsCssClass' => 'plTable items', //change design of the table, removed search bar
    'enableSorting' => true,
    'summaryText' => false,
    'columns' => array(
        array(
            'type' => 'raw',
            'name' => 'pattern',
            'header' => $externNumber->getAttributeLabel('pattern'),
            'headerHtmlOptions' => array('data-translation-id' => 'EXTERNAL_NUMBER_MODEL_PATTERN'),
            'value' => array($this, 'renderExternalNumberInput'),
        ),
        array(
            'type' => 'raw',
            'name' => 'callThrough',
            'header' => $externNumber->getAttributeLabel('callThrough'),
            'headerHtmlOptions' => array('data-translation-id' => 'EXTERNAL_NUMBER_MODEL_CALL_TROUGH'),
            'value' => array($this, 'renderExternalNumberInput'),
        ),
          array(
              'type' => 'raw',
              'name' => 'useParallelCall',
              'header' => $externNumber->getAttributeLabel('useParallelCall'), 
              'headerHtmlOptions' => array('data-translation-id' => 'EXTERNAL_NUMBER_MODEL_PARALLEL_CALL'),
              'value' => array($this, 'renderExternalNumberInput'),
          ),
        array(
            'class' => 'bootstrap.widgets.TbButtonColumn',
            'htmlOptions' => array(
                'class' => 'buttonColumnIcons',
                'style' => 'cursor: pointer;width:55px;',
                'title' => __("GRID_DELETE_TOOLTIP"),
                'data-translation-id' => "GRID_DELETE_TOOLTIP"
            ),
            'template' => '{delete}',
            'buttons' => array(
                'delete' => array(
                    'url' => '',
                    'label' => "",
                    'visible' => 'true', //FIXME
                    'click' => 'js:function(){
                                        $(this).parent().find(".tooltip-inner").remove();
                                        $(this).parent().find(".tooltip-arrow").remove();
                                        $(this).parent().parent().remove();
                        }',
                ),
            ),
            'footer' => '<div style="cursor: pointer;" class="icon-plus addExternalNumber"
                                data-toggle="tooltip" title="' . __("CALL_TROUGH_ADD_PARAMETER_TOOLTIP") . '"
                                data-translation-id="CALL_TROUGH_ADD_PARAMETER_TOOLTIP">
                    </div>',
        ),
    ),
        )
);
?>
<style>
    .addExternalNumber{
        background-color: #fff;
    }
</style>
<script>
    var firstCallThrougRule = $('#external-number-grid tbody tr').first();
    //trash Counter !
    var index = $('#external-number-grid tbody').find('.icon-trash').length;

    $('.addExternalNumber').click(function () {
        var index = $('#external-number-grid tbody').find('.icon-trash').length;
        $('#external-number-grid  > table').append(firstCallThrougRule.clone().addClass('new-item-animated'));
        $('#external-number-grid tbody tr:last-child').show();
        $('#external-number-grid tbody tr:last-child input').each(function (i, e) {

            var originId = e.id;
            var translationTag = originId.replace('_0_', '_').toUpperCase() + "_CONTEXT_HELP";
            e.name = e.name.replace('0', index);
            e.id = e.id.replace('0', index);

            contextHelper.addlisteningElement("#" + e.id, translationTag);

            if (e.type === 'checkbox') {
                e.value = '1';
                e.checked = true;
            } else {
                e.value = '';
            }
        });
    });

</script>
