<?php
echo CHtml::beginForm();
$this->widget('ext.PlGrid.PlGridView', array(
    'id' => 'dns-records-grid',
    'summaryText' => false,
    'enableAddButton' => false,
    'enableSearchButton' => false,
    'showNavbar' => true,
    'showAlertBlock' => true,
    'alertAutoHide' => false,
    'useCustomTitle' => true,
    'headerTitle' => $domainName,
    'dataProvider' => $dataProvider,
    'customButtons' => array(
        'label' => __('GLOBAL_BACK'),
        'url' => url('networkDNS/default/index'),
        'active' => false,
        'icon' => 'arrow-left',
    ),
    'columns' => array(
        array(
            'name' => 'name',
            'header' => __('DNS_RECORD_HOST_NAME'),
            'type' => 'raw',
            'headerHtmlOptions' => array('data-translation-id' => 'DNS_RECORD_HOST_NAME'),
            'value' => array($this, 'renderInput')
        ),
        array(
            'name' => 'type',
            'header' => __('DNS_RECORD_TYPE'),
            'type' => 'raw',
            'headerHtmlOptions' => array('data-translation-id' => 'DNS_RECORD_TYPE'),
            'value' => array($this, 'renderDNSRecordType'),
            'htmlOptions' => array(
                'onChange' => 'changeInputFields(this);',
                'class' => 'dnsRecordType'
            )
        ),
        array(
            'name' => 'host',
            'header' => __('DNS_RECORD_HOST'),
            'type' => 'raw',
            'headerHtmlOptions' => array('data-translation-id' => 'DNS_RECORD_HOST'),
            'value' => array($this, 'renderInput')
        ),
        array(
            'name' => 'prio',
            'header' => __('DNS_RECORD_PRIO'),
            'type' => 'raw',
            'headerHtmlOptions' => array('data-translation-id' => 'DNS_RECORD_PRIO'),
            'value' => array($this, 'renderInput')
        ),
        array(
            'class' => 'ext.PlGrid.PlCButtonColumn',
            'template' => '{delete}',
            'buttons' => array(
                'delete' => array(
                    'url' => '',
                    'label' => "",
                    'click' => 'js:function(){                           
                                $(this).parent().parent().remove();
                        }',
                ),
            ),
            'footer' => '<div style="cursor: pointer;" class="icon-plus addDNSRecord"
                                data-toggle="tooltip" title="' . __("GLOBAL_ADD_NEW_LINE") . '"
                                data-translation-id="GLOBAL_ADD_NEW_LINE">
                        </div>',
        )
    ),
        )
);

$this->renderPartial('_saveBtn');
echo CHtml::endForm();
?>
<script>

    $(document).ready(function () {
        $('.dnsRecordType').each(function (i, e) {
            changeInputFields($(e));
        });
    });

    var rowTemplate = $('#dns-records-grid tbody tr').first();

    $('.addDNSRecord').click(function () {
        var index = $('#dns-records-grid tbody').find('.icon-trash').length;
        $('#dns-records-grid > table').append(rowTemplate.clone().addClass('new-item-animated'));
        $('#dns-records-grid tbody tr:last-child').show();
        $('#dns-records-grid tbody tr:last-child').find(':input').each(function (i, e) {
            e.name = e.name.replace('0', index);
            e.id = e.id.replace('0', index);
            e.value = '';
        });
    });

    function changeInputFields(dropdown) {
        var type = $(dropdown).find(':input').val();
        var mxType = '<?php echo DNSRecordType::MX; ?>';
        var inputFields = $(dropdown).parent().find(':input');
        var hiddenFields = $(dropdown).parent().find(':hidden');
        var hostField = getMatchedInputField(inputFields, /_host$/);
        var prioField = getMatchedInputField(inputFields, /_prio$/);
        var dnsIDField = getMatchedInputField(hiddenFields, /_dnsID$/);

        if (type === mxType) {
            prioField.disabled = false;
            if (prioField.value === '') {
                prioField.value = '10';
            }
            changeHostField(hostField, dnsIDField, type);
        } else {
            prioField.disabled = true;
            prioField.value = '';
            changeHostField(hostField, dnsIDField, type);
        }
    }

    function changeHostField(hostField, dnsIDField, type) {
        var hostFieldNameID = hostField.id;
        var hostFieldName = hostField.name;
        var hostFieldValue = hostField.value;
        var dnsRecordID = dnsIDField.value;
        var dnsZoneID = '<?php echo $dnsZone; ?>';

        $.ajax({
            method: 'POST',
            url: '<?php echo url('networkDNS/default/renderHostField'); ?>',
            dataType: 'html',
            data: {
                hostFieldName: hostFieldName,
                hostFieldValue: hostFieldValue,
                dnsZoneID: dnsZoneID,
                dnsRecordID: dnsRecordID,
                type: type
            },
            success: function (result) {
                $('#' + hostFieldNameID).replaceWith(result);
            }
        });
    }

    function getMatchedInputField(inputFields, match) {
        var inputField = '';
        inputFields.each(function (i, e) {
            if (e.id.match(match)) {
                inputField = e;
            }
        });
        return inputField;
    }
</script>
