<?php
$form = $this->beginWidget('ext.PlGrid.PlActiveForm', array(
    'id' => 'blacklist-form',
    'gridId' => 'blacklist-grid',
    'displayProgressBar' => false,
    'action' => $model->isNewRecord ? array($actionName) : array()
        ));

echo $form->textFieldRow($model, 'name', array(
    'data-translation-id' => $modelName . '_MODEL_NAME',
));

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'blacklist-pattern-grid',
    'dataProvider' => $pattern->search($model->id),
    'enableHistory' => false,
    'type' => 'striped bordered condensed', //change color from columns in 'white' and 'grey' responsively
    'itemsCssClass' => 'plTable items',
    'summaryText' => false, //change design of the table, removed search bar
    'columns' => array(
        array(
            'name' => 'pattern',
            'header' => $pattern->getAttributeLabel('pattern'),
            'headerHtmlOptions' => array('data-translation-id' => $modelName . '_PATTERN_MODEL_PATTERN'),
            'value' => array($this, 'renderPatternInput'),
            'footer' => __('BLACKLIST_FORM_ADD_PATTERN_BUTTON'),
            'footerHtmlOptions' => array('class' => 'addPattern', 'style' => 'text-align:right;cursor: pointer;', 'data-translation-id' => 'BLACKLIST_FORM_ADD_PATTERN_BUTTON'),
        ),
        array(
            'class' => 'bootstrap.widgets.TbButtonColumn',
            'htmlOptions' => array(
                'class' => 'buttonColumnIcons',
                'style' => 'width:55px;cursor: pointer;',
                'title' => __("GRID_DELETE_TOOLTIP"),
                'data-translation-id' => "GRID_DELETE_TOOLTIP"
            ),
            'template' => '{delete}',
            'buttons' => array(
                'delete' => array(
                    'url' => '',
                    'label' => "",
                    'visible' => 'true',
                    'click' => 'js:function(){                               
                                        $(this).parent().parent().remove();
                                }',
                ),
            ),
            'footer' => '<div style="cursor: pointer;" class="icon-plus addPattern" data-toggle="tooltip" data-translation-id="BLACKLIST_ADD_PATTERN_TOOLTIPP" title="' . __("BLACKLIST_ADD_PATTERN_TOOLTIPP") . '"></div>',
        ),
    ),
        )
);
$this->endWidget();
?>
<style>
    .table-bordered tfoot td{
        border-left-color: transparent;
    }
    .table-bordered tfoot td:last-child , .table-bordered tfoot td:first-child {
        border-left-color: #ddd;
    }
    .addPattern{
        background-color: #fff;
    }
</style>
<script>
    var firstPattern = $('#blacklist-pattern-grid tbody tr').first();
    var index = $('#blacklist-pattern-grid tbody').find('.icon-trash').length;
    $('.addPattern').click(function () {
        $('#blacklist-pattern-grid > table').append(firstPattern.clone().addClass('new-item-animated'));
        $('#blacklist-pattern-grid tbody tr:last-child').show();
        $('#blacklist-pattern-grid tbody tr:last-child input').each(function (i, e) {
            e.value = '';
            e.name = e.name.replace('0', index);
            e.id = e.id.replace('0', index);
            console.log(e);
        });
        index = index + 1;
    });
</script>