<?php
cs()->registerScriptFile(Yii::app()->baseUrl . '/js/plDynamicGrid/plDynamicGrid.js', CClientScript::POS_HEAD);

$listData = $this->getListDataForSecretaryDropdown($model);

$html = CHtml::activeDropDownList($secretary, 'secretaryId', $listData, array('name' => 'userDropdown', 'class' => 'contextHelp-span2 bossSecDropdown'));

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'secretary-grid',
    'dataProvider' => $secretary->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'=>$secretary,
    'summaryText' => false,
    // 'selectableRows'=>2,
    'rowCssClassExpression' => '!$data->id?"hideRow":""',
    'columns' => array(
        array(
            'type' => 'raw',
            'header' => $secretary->getAttributeLabel('bossId'),
            'headerHtmlOptions' => array('data-translation-target' => 'SECRETARY_MODEL_SECRETARY_TAB_TRANSLATION'),
            'value' => array($this, 'renderSecretaryDropDown'),
            'footer' => $html . '<div style="text-align:right;cursor: pointer;display: inline;float:right;"
                                   data-translation-id="TIERS_MODEL_FOOTER_ADD_SECRETARY_BUTTON"
                                   class="addSecretary"
                                >' . __('TIERS_MODEL_FOOTER_ADD_SECRETARY_BUTTON') . '</div>'
        ),
        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();
                                        removeSecretary(this);
                                        return false;
                        }',
                ),
            ),
            'footer' => '<div style="cursor: pointer;" class="icon-plus addSecretary"  
            					data-toggle="tooltip" title="' . __("TIERS_FORM_ADD_PARAMETER_TOOLTIP") . '"
            					data-translation-id="TIERS_FORM_ADD_PARAMETER_TOOLTIP">
            		</div>',
        ),
    ),
        )
);

if (Yii::app()->user->translateMode) {
    echo '<i data-translation-target="SECRETARY_MODEL_SECRETARY_TAB_TRANSLATION" data-translation-id="SECRETARY_MODEL_BOSS_ID"></i>';
    echo '<i data-translation-target="SECRETARY_MODEL_SECRETARY_TAB_TRANSLATION" data-translation-id="SECRETARY_MODEL_CHOOSE_SECRETARY"></i>';
}
?>
<style>
    .hideRow{
        display:none;
    }

    .addSecretary{
        background-color: #fff;
    }
</style>
<script>

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

    new plDynamicGrid(
            '#secretary-grid',
            "hideRow",
            '.addSecretary',
            "new-item-animated",
            function (inputElement, index) {
                if (inputElement.id.indexOf("secretaryId") >= 0) {
                    $(inputElement).val($('#userDropdown').val());
                    var selectedOption = $('#userDropdown').find('option:selected');
                    $(inputElement).parent().find("div").text(selectedOption.text());
                    selectedOption.remove();
                }

                if (!$('#userDropdown option').length) {
                    $('#secretary-grid tfoot').hide();
                }
            }
    );

    function removeSecretary(el) {
        var optionText = $(el).parents("tr").find("td").text();
        var optionValue = $(el).parents("tr").find("td input[name*='secretaryId']").val();
        $("#userDropdown").append($('<option />').text(optionText).val(optionValue));
        $(el).parent().parent().remove();
        $('#secretary-grid tfoot ').show();
    }

</script>