<?php
$this->renderPartial('_timeRangePicker', array('rangeDropdown' => $rangeDropdown));

foreach ($data as $key => $entry) {
    $this->widget('ext.PlNavbar', array(
        'brand' => __('ANALYTICSADVANCEDQUEUEREPORT_HEADER') . $model->getFormatedQueueName($entry),
        'enableHelpBtn' => false,
        'summary' => '',
        'items' => array(
            array(
                'class' => 'bootstrap.widgets.TbMenu',
                'items' => array(
                    '---',
                    array(
                        'label' => __('ADVANCED_QUEUE_REPORT_OPEN_GRID'),
                        'icon' => 'chevron-down',
                        'url' => '#',
                        'active' => false,
                        'linkOptions' => array(
                            'id' => 'advanced-queue-report-grid_' . $key . '_switcher',
                            'queue_id' => $entry->id,
                            'data-translation-target' => 'ADVANCED_QUEUE_REPORT_GRID_SWITCHER',
                            'onclick' => 'processGridControll(this);',
                        )
                    ),
                ),
            ),
        ),
            )
    );
    echo "<div class='advQueueReportGrid' id='advQueueReportGridContainer_$key'></div>";
}


if (Yii::app()->user->translateMode) {
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_GRID_SWITCHER" data-translation-id="ADVANCED_QUEUE_REPORT_OPEN_GRID"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_GRID_SWITCHER" data-translation-id="ADVANCED_QUEUE_REPORT_CLOSE_GRID"></i>';

    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_AGENT_COLUMN" data-translation-id="ADVANCED_QUEUE_REPORT_AGENT"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_AGENT_COLUMN" data-translation-id="ADVANCED_QUEUE_REPORT_FULL_QUEUE_TEXT"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_AGENT_COLUMN" data-translation-id="ADVANCED_QUEUE_REPORT_DELETED_USER"></i>';

    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_READY_TIME_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_READY_TIME_TOOLTIP"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_READY_TIME_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_READY_TIME"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_READY_TIME_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_LAST_LOGIN_LOGOUT_TOOLTIP"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_READY_TIME_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_STATIC_MEMBER"></i>';

    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_SUCCESS_RATE_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_SUCCESS_TOOLTIP"></i>';
    echo '<i data-translation-target="ADVANCED_QUEUE_REPORT_SUCCESS_RATE_TRANSLATIONS" data-translation-id="ADVANCED_QUEUE_REPORT_SUCCESS_RATE"></i>';
}
?>

<script>

    $(document).ready(function () {
        var gridList = $('.advQueueReportGrid .grid-view');
        $('#advanced-queue-report-grid_0_switcher').click();
    });

    function processGridControll(btn) {
        var btnId = $(btn).attr('id');
        var gridId = btnId.replace('_switcher', '');
        var grid = $('#' + gridId);
        var icon = $('#' + btnId + ' > i');
        var openGridText = "<?php echo __('ADVANCED_QUEUE_REPORT_OPEN_GRID'); ?>";
        var closeGridText = "<?php echo __('ADVANCED_QUEUE_REPORT_CLOSE_GRID'); ?>";
        var replacedBtnHtml = '';
        var queue_id = $(btn).attr('queue_id');
        var gridKey = gridId.replace('advanced-queue-report-grid_', '');

        if (grid.is(":visible")) {
            icon.attr('class', 'icon-chevron-down');
            replacedBtnHtml = $(btn).html().replace(closeGridText, openGridText);
            grid.fadeOut();
            $('#advQueueReportGridContainer_' + gridKey).empty();
        } else {
            icon.attr('class', 'icon-chevron-up');
            replacedBtnHtml = $(btn).html().replace(openGridText, closeGridText);
            getAjaxDataForQueue(queue_id, gridKey);
            grid.fadeIn();
        }
        $(btn).html(replacedBtnHtml);
    }


    function getAjaxDataForQueue(queue_id, gridKey) {

        var time_range = '<?php echo isset($_REQUEST['range']) ? $_REQUEST['range'] : ''; ?>';
        var time_picker_value = $('#StatisticDay').val();

        if (time_range === '<?php echo Statistic::StatisticTimeRangeTypeWeek; ?>') {
            var week = $('#weekDropdown').val();
            if (week === undefined || week === null) {
                week = '<?php echo isset($_REQUEST['week']) ? $_REQUEST['week'] : ''; ?>';
            }
            time_picker_value = week + '_' + $('#StatisticDay').val();
        }

        $.ajax({
            url: '<?php echo url('analyticsAdvancedQueueReport/default/getAjaxDataForQueue'); ?>',
            type: 'GET',
            dataType: 'html',
            data: {
                queue_id: queue_id,
                grid_key: gridKey,
                time_range: time_range,
                time_picker_value: time_picker_value
            },
            success: function (result) {
                $('#advQueueReportGridContainer_' + gridKey).html(result);
                showSuccessRateColored($('#advQueueReportGridContainer_' + gridKey).attr('id'));
                $('#weekDropdown').val(week);
            }
        });

    }

    function changeDate() { //parent-function is overwritten by this because of js-errors
        return;
    }

    function selectWeek() { //parent-function is overwritten by this because of js-errors
        return;
    }

    function updateDiagram() {
        var advQueueGrid = $('.advQueueReportGrid');
        $.each(advQueueGrid, function (key, value) {
            if ($(value).find('div.activeGrid').length !== 0) {
                var queue_id = $('#advanced-queue-report-grid_' + key + '_switcher').attr('queue_id');
                getAjaxDataForQueue(queue_id, key);
            }
        });
    }

    function showSuccessRateColored(gridId) {
        $('#' + gridId + ' td.successRateInPercent').each(function () {
            var value = $(this).text().replace('%', '');
            $(this).css('background-color', getColor(value));
        });
    }

    function getColor(value) {
        var hue = ((value / 100) * 120).toString(10);
        var color = ["hsl(", hue, ",100%,50%)"].join("");
        return color;
    }

</script>