<?php
$modelConference = new ConferenceModerator();
$availebleModerators = $modelConference->getAvailableModerators($model->id);
$footerHtml = CHtml::activeDropDownList($modelConference,'userId',$availebleModerators,array('class'=>'span2','name'=>'moderatorDropDown'));
$this->widget('bootstrap.widgets.TbGridView', array(
        'id'=>'conference-moderator-grid',
        'dataProvider'=>$modelConference->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,
        'filter'=>$modelConference,
        'summaryText' => false,
        // 'selectableRows'=>2,
        'rowCssClassExpression'=>'!$data->id?"hideRow":""',
        'columns'=>array(
            array(
                'name'=>'userId',
                'header' => __('CONFERENCE_MODERATOR_MODEL_USER_ID'),
                'headerHtmlOptions'=>array('data-translation-target'=>'CONFERENCE_MODERATOR_MODEL_USER_ID_DROPDOWN'),
                'value'=>array($this,'renderModeratorGridInput'),
                'footer'=>$footerHtml,
            ),
             array(
                 'name'=>'moderatorCall',
                 'header' => __('CONFERENCE_MODERATOR_MODEL_MODERATOR_CALL'),
                 'headerHtmlOptions'=>array('data-translation-id'=>'CONFERENCE_MODERATOR_MODEL_MODERATOR_CALL'),
                 'value'=>array($this,'renderModeratorGridInput'),
                 'footer'=>CHtml::checkBox('moderatorCallPreset','1')
             ),
            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',//FIXME
                        'click'=>'js:function(){         
                                $(this).parent().find(".tooltip-inner").remove();
                                $(this).parent().find(".tooltip-arrow").remove();
                                removeModerator(this);
                                return false;
                        }',
                    ),
                ),
            'footer'=>'<div class="icon-plus addModerator" style="cursor: pointer;" 
            				data-toggle="tooltip" title="'.__("CONFERENCE_MODEL_ROW_ADD_CONFERENCE_TOOLTIP").'" 
            				data-translation-id="CONFERENCE_MODEL_ROW_ADD_CONFERENCE_TOOLTIP">
            		</div>',
            ),
        ),

    )
);
?>
<style>
    .hideRow{
        display:none;
    }

    .addModerator{
        background-color: #fff;
    }
   /* .table-bordered tfoot td{
        border-left-color: transparent;
    }
    .table-bordered tfoot td:last-child , .table-bordered tfoot td:first-child {
        border-left-color: #ddd;
    }*/
</style>
<script>
if (!document.getElementById('moderatorDropDown').options[document.getElementById('moderatorDropDown').options.selectedIndex]) {
    $('#conference-moderator-grid tfoot').hide()
}
var index = $('#conference-moderator-grid tbody').find('.icon-trash').length;
var firstModerator = $('#conference-moderator-grid tbody tr').first();

$('.addModerator').click(function() {
    index = index+1;
    var label = $('#moderatorDropDown').find(':selected').text();
    var userId = $('#moderatorDropDown').find(':selected').val();
    $('#moderatorDropDown').find(':selected').remove();

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

    $(result).find('input').each(function(i,e) {
        if (e.type == 'checkbox') {
            e.checked = $('#moderatorCallPreset').is(':checked');
        }
        e.name = e.name.replace('0', index);
        e.id = e.id.replace('0', index);  
    });
    $('#conference-moderator-grid > table').append(result.addClass('new-item-animated'));
    
    if (!document.getElementById('moderatorDropDown').options[document.getElementById('moderatorDropDown').options.selectedIndex]) {
        $('#conference-moderator-grid tfoot').hide();
    }

});

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

        var label = $(el).parent().parent().find("td:first-child div").html();
        
        label = label.replace("&lt;","<");
        label = label.replace("&gt;",">");
        
        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("#moderatorDropDown");
            }
        }

        $(el).parent().parent().remove();
        $('#conference-moderator-grid tfoot').show();
    }
</script>