<?php
$listData = $this->getListDataForMembersDropdown($model);
$html = CHtml::dropDownList('memberDropdown', '', $listData);

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'group-member-grid',
    'dataProvider' => $this->getDataProvider($model),
    'summaryText' => false,
    'selectableRows' => 0,
    'type' => 'striped bordered condensed',
    'itemsCssClass' => 'plTable items',
    'rowCssClassExpression' => '!$data->id?"hideRow":""',
    'columns' => array(
        array(
            'name' => 'name',
            'header' => __('USERGROUP_FORM_MEMBER_TABLE_HEADER'),
            'headerHtmlOptions' => array('data-translation-id' => 'USERGROUP_FORM_MEMBER_TABLE_HEADER'),
            'value' => array($this, 'renderUserColumn'),
            'footer' => $html . '<span class="addMember" style="float: right; padding-top: 5px;">' . __('USERGROUP_FORM_ADD_MEMBERS') . '</div>',
            'footerHtmlOptions' => array(
                'style' => 'cursor: pointer;',
                'data-translation-id' => 'USERGROUP_FORM_ADD_MEMBERS',
            )
        ),
        array(
            'class' => 'bootstrap.widgets.TbButtonColumn',
            'htmlOptions' => array(
                'class' => 'buttonColumnIcons',
                'style' => 'width:55px;cursor: '.$this->getDeletePointer($model).';',
                'title' => $this->getDeleteTooltipTitle($model),
                'data-translation-id' => "GRID_DELETE_TOOLTIP"
            ),
            'template' => '{delete}',
            'buttons' => array(
                'delete' => array(
                    'url' => '',
                    'label' => "",
                    'visible' => $this->getDeleteVisibleStatus($model),
                    'click' => 'js:function(){  
                                    $(this).parent().find(".tooltip-inner").remove();
                                    $(this).parent().find(".tooltip-arrow").remove();
                                    removeMember(this);
                                    return false;
                        }',
                ),
            ),
            'footer' => '<span class="icon-plus addMember" style="cursor: pointer;"
                    id="addMember2"
                    data-toggle="tooltip" title="' . __("USERGROUP_FORM_ADD_MEMBERS") . '"
                    data-translation-id="USERGROUP_FORM_ADD_MEMBERS">
                    </span>',
        ),
    ),
        )
);
?> 
<style>
    .hideRow{
        display:none;
    }
</style>
<script>
    if (!document.getElementById('memberDropdown').options[document.getElementById('memberDropdown').options.selectedIndex]) {
        $('#group-member-grid tfoot ').hide();
    }

    var firstRule = $('#group-member-grid tbody tr').first();
//trash Counter ! 
    var index = $('#group-member-grid tbody').find('.icon-trash').length;

    $('.addMember').click(function () {
        index = index + 1;
        var label = $('#memberDropdown').find(':selected').text();
        var userId = $('#memberDropdown').find(':selected').val();
        $('#memberDropdown').find(':selected').remove();
        var result = firstRule.clone().addClass('new-item-animated');

        var labelContainer = $("<div />").text(label);
        var userIDInput = $("<input />")
            .attr('type', 'hidden')
            .attr('name', 'User[' + index + '][userId]')
            .val(userId);
        $(result).find('td:first-child').text('').append(labelContainer).append(userIDInput);
        
        $(result).find('td:first-child').next().attr('title', '<?php echo __("GRID_DELETE_TOOLTIP"); ?>');
        $(result).find('td:first-child').next().attr('style', 'width:55px;cursor: pointer;');
        
        $(result).find('td:first-child').next().html(
                '<div class="icon-trash" onclick="removeMember(this)"></div>'
                );
        $(result).removeClass('hideRow');
        $('#group-member-grid > table').append(result);

        $(result).find('input').each(function (i, e) {
            e.name = e.name.replace('0', index);
            e.id = e.id.replace('0', index);
            if (e.id === 'User_' + index + '_dataId') {
                e.value = '';
            }
        });

        if (!document.getElementById('memberDropdown').options[document.getElementById('memberDropdown').options.selectedIndex]) {
            $('#group-member-grid tfoot ').hide();
        }
    });

    function removeMember(el) {
        var dropdownValues = new Array();
        $('#memberDropdown').find('option').each(function (i, e) {
            dropdownValues.push(e.value);
        });

        var label = $(el).parent().parent().find("td:first-child div").text();
        var userId = $(el).parent().parent().find("td:first-child :hidden").val();
        var addDropdownValue = "1";
        for (var k = 0; k < dropdownValues.length; k++) {
            if (userId === dropdownValues[k]) {
                addDropdownValue = "0";
            }
        }

        if (addDropdownValue === "1") {
            if (userId) {
                $("<option/>").val(userId).text(label).appendTo("#memberDropdown");
            }
        }

        $('#group-member-grid tfoot ').show();
        index = index - 1;
        $(el).parent().parent().remove();
    }
</script>