<style>
    #queue-member-grid select{
        width: auto;
    }
</style>
<?php
$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'queue-member-grid',
    'dataProvider' => $tier->searchQueueMembers($model->id, TiersType::user),
    'summaryText' => false,
    'selectableRows' => 0,
    'type' => 'striped bordered condensed',
    'itemsCssClass' => 'plTable items',
    'rowCssClassExpression' => '$data->id==""?"hideRow":""',
    'columns' => array(
        array(
            'name' => 'userId',
            'header' => $tier->getAttributeLabel('userId'),
            'headerHtmlOptions' => array('data-translation-id' => 'TIERS_MODEL_USER_ID', 'style' => 'min-width:180px'),
            'value' => array($this, 'renderUserDropDown'),
            'footer' => $this->renderPartial('QueueMemberDropdown', array('availableUsers' => $availableUsers, 'tier' => $tier), true),
        ),
        array(
            'name' => 'static_member',
            'header' => $tier->getAttributeLabel('static_member'),
            'headerHtmlOptions' => array('data-translation-id' => 'TIERS_MODEL_STATIC_MEMBER', 'style' => 'width:105px;'),
            'value' => array($this, 'renderUserDropDown'),
            'footer' => $this->renderPartial('queueUserInput', array('tier' => $tier, 'row' => 'footer', 'data' => $tier, 'column' => 'static_member'), true),
        ),
        array(
            'name' => 'level',
            'header' => $tier->getAttributeLabel('level'),
            'headerHtmlOptions' => array('data-translation-id' => 'TIERS_MODEL_LEVEL', 'style' => 'width:50px;'),
            'value' => array($this, 'renderUserDropDown'),
            'footer' => $this->renderPartial('queueUserInput', array('tier' => $tier, 'row' => 'footer', 'data' => $tier, 'column' => 'level'), true),
            'visible' => $model->getVisibilityByLicense()
        ),
        array(
            'name' => 'position',
            'type' => 'raw',
            'header' => $tier->getAttributeLabel('position'),
            'headerHtmlOptions' => array('data-translation-id' => 'TIERS_MODEL_POSITION', 'style' => 'width:74px;'),
            'value' => array($this, 'renderUserDropDown'),
            'footer' => $this->renderPartial('queueUserInput', array('tier' => $tier, 'row' => 'footer', 'data' => $tier, 'column' => 'position'), true),
            'visible' => $model->getVisibilityByLicense()
        ),
        array(
            'name' => 'timeout',
            'type' => 'raw',
            'header' => $tier->getAttributeLabel('timeout'),
            'headerHtmlOptions' => array('data-translation-id' => 'TIERS_MODEL_TIMEOUT', 'style' => 'width:100px;'),
            'value' => array($this, 'renderUserDropDown'),
            'footer' => $this->renderPartial('queueUserInput', array('tier' => $tier, 'row' => 'footer', 'data' => $tier, 'column' => 'timeout'), true),
        ),
        array(
            'class' => 'bootstrap.widgets.TbButtonColumn',
            'htmlOptions' => array(
                'class' => 'buttonColumnIcons',
                'style' => 'min-width:0px;',
                'title' => Yii::t('zii', 'Delete'),
            ),
            'template' => '{delete}',
            'deleteConfirmation' => false,
            'buttons' => array(
                'delete' => array(
                    'url' => '',
                    'label' => '',
                    'options' => array('class' => 'removeMember'),
                    'visible' => 'true', //FIXME
                    'click' => 'js:function(){       
                                        removeMember(this);
                                        return false;
                            }',
                ),
            ),
            'footer' => '<div class="icon-plus addMember" style="cursor: pointer;"
                    id="addMember2"
            		data-toggle="tooltip" title="' . __("ROUTING_QUEUE_RULE_ADD_RULE") . '"
            		data-translation-id="ROUTING_QUEUE_RULE_ADD_RULE">
            		</div>',
        ),
    ),
        )
);
?> 
<style>
    .removeMember{
        background-color: #fff;
    }
    .addMember{
        background-color: #fff;
        text-align: right;
    }
    .hideRow{
        display:none;
    }
</style>
<script>
    if (!document.getElementById('userDropdown').options[document.getElementById('userDropdown').options.selectedIndex]) {
        $('#queue-member-grid tfoot ').hide();
    }
    var firstRule = $('#queue-member-grid tbody tr:first-child');
    var memberIndex = $('#queue-member-grid tbody').find('.icon-trash').length;

    $('.addMember').click(function () {
//             debugger;
        memberIndex = memberIndex + 1;

        var label = $('#userDropdown').find(':selected').text();
        var title = $('#userDropdown').find(':selected').attr('title');
        var userId = $('#userDropdown').find(':selected').val();

        var defaultValueStaticMember = $('#Tiers_footer_static_member').is(':checked');
        var defaultValueLevel = $('#Tiers_footer_level').val();
        var defaultValuePosition = $('#Tiers_footer_position').val();
        var defaultValueTimeout = $('#Tiers_footer_timeout').val();

        $('#Tiers_footer_static_member').attr('checked', defaultValueStaticMember);
        $('#Tiers_footer_level').val(defaultValueLevel);
        $('#Tiers_footer_position').val(defaultValuePosition);

        $('#userDropdown').find(':selected').remove();

        var result = firstRule.clone();
        $('#queue-member-grid > table').append(result.addClass('new-item-animated'));

        var labelContainer = $("<div />")
                .attr('title', title)
                .text(label);
        var userIDInput = $("<input />")
                .attr('type', 'hidden')
                .attr('name', 'Tiers[0][userId]')
                .val(userId)
                .html('<input type="hidden" name="Tiers[0][dataId]" value="" ></input>' +
                        '<input type="hidden" name="Tiers[0][type]" value="0" ></input>'
                        );
        $(result).find('td:first-child').text('').append(labelContainer).append(userIDInput);

        $(result).find('td:first-child').next().find('input').attr('checked', defaultValueStaticMember);

        if (typeof defaultValueLevel !== "undefined" && typeof defaultValuePosition !== "undefined") {
            $(result).find('td:first-child').next().next().find('select').val(defaultValueLevel);
            $(result).find('td:first-child').next().next().next().find('input').val(defaultValuePosition);
            $(result).find('td:first-child').next().next().next().next().find('input').val(defaultValueTimeout);
        } else {
            $(result).find('td:first-child').next().next().find('input').val(defaultValueTimeout);
        }

        $('#queue-member-grid tbody tr:last-child').show();

        $('#queue-member-grid tbody tr:last-child input').each(function (i, e) {
            e.name = e.name.replace('0', memberIndex);
            e.id = e.id.replace('0', memberIndex);
            if (e.id == 'Tiers_' + memberIndex + '_dataId') {
                e.value = '';
            }
        });
        // get the selectet label of dropdown
        $('#queue-member-grid tbody tr:last-child select').each(function (i, e) {
            e.name = e.name.replace('0', memberIndex);
            e.id = e.id.replace('0', memberIndex);
        });

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

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

        var label = $(el).parent().parent().find("td:first-child div").text();
        var title = $(el).parent().parent().find("td:first-child div").attr('title');
        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) {
                //FIXME ! add attr('title'. username ) before ".appandTo()"
                $("<option/>").val(userId).text(label).attr('title', title).appendTo('#' + $(el).parent().parent().parent().parent().find('tfoot select').attr('id'));
            }
        }

        $($(el).parent().parent().parent().parent().find('tfoot')).show();
        $(el).parent().parent().remove();
    }
</script>