<script language='javascript' src='./include/common/javascript/tool.js'></script>
<div id="div1" style="position:relative;">
    <form {$form.attributes}>
        <table class="ajaxOption table">
            <tr>
                <th><h5>{t}Chart Filters{/t}</h5></th>
            </tr>
            <tr>
              <td><h4>{t}Period{/t}</h4></td>
              <td><h4>{t}From{/t}</h4></td>
              <td><h4>{t}To{/t}</h4></td>
            </tr>
            <tr>
                <td>{$form.period.html}</td>
                <td>{$form.StartDate.html} {$form.StartTime.html}</td>
                <td>{$form.EndDate.html} {$form.EndTime.html}</td>
            </tr>
        </table>
    </form>
    <div class="graph-options">
        <div class="refresh" id="chart-refresh">
            <div class="icon refresh-icon">
                <span class="ico-14">
                    {php}displaySvg("www/img/icons/refresh.svg", "var(--icons-fill-color)", 14, 14){/php}
                </span>
            </div>
            <span class="time" style="display: none"></span>
            <div class="icon">
                <span class="ico-14 timer-icon">
                    {php}displaySvg("www/img/icons/timer.svg", "var(--icons-disabled-fill-color)", 14, 14){/php}
                </span>
            </div>
            <ul class="refresh-list">
                <li data-interval="0">{t}None{/t}</li>
                <li data-interval="1m">{t}1 minute{/t}</li>
                <li data-interval="5m">{t}5 minutes{/t}</li>
                <li data-interval="15m">{t}15 minutes{/t}</li>
                <li data-interval="30m">{t}30 minutes{/t}</li>
            </ul>
        </div>
        <a onclick="javascript:switchCols(1)" class="ico-16 margin_right ico-col ico-col-1 active" alt="{t}One column{/t}" title="{t}One column{/t}"></a>
        <a onclick="javascript:switchCols(2)" class="ico-16 margin_right ico-col ico-col-2" alt="{t}Two columns{/t}" title="{t}Two columns{/t}"></a>
        <a onclick="javascript:switchCols(3)" class="ico-16 margin_right ico-col ico-col-3" alt="{t}Three columns{/t}" title="{t}Three columns{/t}"></a>
    </div>
    <div>
        {$form.hidden}
    </div>
    <div id="graphs" class="graph_content">
        <div class="graphZone">
            {foreach from=$metrics item=metric}
            <div id="graph_wrapper_{$metric.id}" data-graph-id="{$metric.id}" class="graph">
                <div class="title">
                    <span class="remove ico-14 margin_right">
                        {php}displaySvg("www/img/icons/circle-crossed.svg", "var(--icons-fill-color)", 14, 14){/php}
                    </span>
                    <span>{$metric.title}</span>
                    <a class="actions" href="#" data-href="./include/views/graphs/generateGraphs/generateMetricImage.php?cpt=1">
                        <span class="ico-14 margin_right">
                            {php}displaySvg("www/img/icons/picture.svg", "var(--icons-fill-color)", 14, 14){/php}
                        </span>
                    </a>
                </div>
                <div class="content">
                    <div class="action left">
                        <button class="bt_action">&lt;&lt;</button>
                    </div>
                    <div class="chart" id="graph-{$metric.id}" data-graph-id="{$metric.id}" data-graph-type="metric"></div>
                    <div class="action right">
                        <button class="bt_action">&gt;&gt;</button>
                    </div>
                </div>
            </div>
            {/foreach}
        </div>
    </div>
</div>
<script src="./include/common/javascript/moment-with-locales.min.2.21.js"></script>
<script src="./include/common/javascript/moment-timezone-with-data.min.js"></script>
<script src="./include/common/javascript/centreon/centreon-select2.js"></script>
<script src="./include/common/javascript/datepicker/localizedDatepicker.js"></script>
{literal}
<script>
var autoRefresh = false;

function initRefresh() {
    var $refresh = jQuery('#chart-refresh');
    $refresh.data('interval', 0);
    $refresh.on('click', function () {
        $refresh.find('.refresh-list')
            .toggleClass('show');
    });

    jQuery(document).on('click', function (e) {
        var $elem = jQuery(e.target);
        if ($refresh.has($elem).length === 0) {
            $refresh.find('.refresh-list')
                .removeClass('show');
        }
    });

    $refresh.delegate('.refresh-icon', 'click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        jQuery('.chart').centreonGraph('refreshData');
    });

    $refresh.delegate('.refresh-list > li', 'click', function () {
        var $interval = jQuery(this);
        var interval = $interval.data('interval');
        var text = $interval.text();
        var parseInterval;
        if (interval == 0) {
            $refresh
                .find('.time')
                .hide()
                .text('');
            var timerDisabled = "{/literal}{$timerDisabled}{literal}";
            $refresh
                .find('.timer-icon')
                .empty()
                .append(timerDisabled);
            jQuery('.chart').centreonGraph('setRefresh', 0);
        } else {
            parseInterval = interval.match(/(\d+)([a-z]+)/i);
            $refresh
                .find('.time')
                .show()
                .text(text);
            var timerEnabled = "{/literal}{$timerEnabled}{literal}";
            $refresh
                .find('.timer-icon')
                .empty()
                .append(timerEnabled);
            jQuery('.chart').centreonGraph(
                'setRefresh',
                moment.duration(
                    parseInt(parseInterval[1], 10),
                    parseInterval[2]
                ).asSeconds()
            );
        }
        $refresh.data('interval', interval);
    });
}

function switchCols(number) {
    jQuery('.graphZone').removeClass(function (index, css) {
        return (css.match(/\bcol\S+/g) || []).join(' ');
    });
    if (number === 2 || number === 3) {
        jQuery('.graphZone').addClass('col' + number);
    }
    jQuery('.graphZone .chart').centreonGraph('resize');
    jQuery('.ico-col').removeClass('active');
    jQuery('.ico-col-' + number).addClass('active');
}

function changePeriod() {
    var start;
    var end;
    jQuery('select[name="period"]').val('');
    start = jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val();
    end = jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val();
    /* Test If all period field are not empty */
    if (start.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/) && end.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/)) {
        /* Test if date start is lower than date end */
        if (moment(start).isBefore(end)) {
            jQuery('.graphZone .chart').centreonGraph(
                'setPeriod',
                start,
                end
            );
            displayNav(end);
        } else {
            // @todo change
            alert('The start date must be before the date end.');
        }
    }
}

function changeInterval() {
    if (jQuery('select[name="period"]').val() === '') {
        return;
    }
    jQuery('.datepicker-iso').datepicker('setDate', null);
    jQuery('.timepicker').val('');
    jQuery('.graphZone .chart').centreonGraph(
        'setInterval',
        jQuery('select[name="period"]').val()
    );
    displayNav(moment());
}

function displayNav(end) {
    var now = moment().subtract(10, 's');
    if (now.isBefore(end)) {
        jQuery('.action.right > .bt_action').prop('disabled', true);
    } else {
        jQuery('.action.right > .bt_action').prop('disabled', false);
    }
}

jQuery(function () {
    var datepickerFormat; //localized user chosen format

    // get timezone from localstorage
    // be careful, it seems that it's updated when user logout/login
    var timezone = localStorage.getItem('realTimezone')
        ? localStorage.getItem('realTimezone')
        : moment.tz.guess();

    initRefresh();

    if ("undefined" == typeof(datepickerFormat)) {
        /* initializing datepicker and the alternative format field */
        initDatepicker("datepicker-iso", "yy-mm-dd", null);
        /* getting the chosen display format */
        datepickerFormat = jQuery("#StartDate").datepicker("option", "dateFormat").toUpperCase();

        /* getting the timestamps from the URI */
        urlPost = window.location.href;
        var postStart = /start=([^&]+)/.exec(urlPost)[1];
        var postEnd = /end=([^&]+)/.exec(urlPost)[1];
        var startObj = moment.unix(postStart).tz(timezone);
        var endObj = moment.unix(postEnd).tz(timezone);

        /* setting the dates from the POST */
        jQuery('input[name=alternativeDateStartDate]').val(startObj.format('YYYY-MM-DD')); //hidden field
        jQuery('#StartDate').val(startObj.format(datepickerFormat)); //displayed date
        jQuery('#StartTime').val(startObj.format('HH:mm'));
        jQuery('input[name=alternativeDateEndDate]').val(endObj.format('YYYY-MM-DD'));
        jQuery('#EndDate').val(endObj.format(datepickerFormat));
        jQuery('#EndTime').val(endObj.format('HH:mm'));
    }

    var start = jQuery('input[name=alternativeDateStartDate]').val() + ' ' + jQuery('#StartTime').val();
    var end = jQuery('input[name=alternativeDateEndDate]').val() + ' ' + jQuery('#EndTime').val();
    if (start.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/) && end.match(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/)) {
        jQuery('.chart').centreonGraph({
            period: {
                startTime: start,
                endTime: end
            }
        });
    } else {
        jQuery('.chart').centreonGraph();
    }

    /* Add events on click on action download image/CSV */
    jQuery('.graphZone').delegate('a.actions', 'click', function (e) {
        var $a = jQuery(this);
        var baseUrl = $a.data('href');
        var chartId = $a.parents('.graph').data('graphId');
        var info = chartId.split('_');
        var svcId = info[0] + '_' + info[1];
        var metricId = info[2];
        var start;
        var end;

        // get timezone from localstorage
        // be careful, it seems that it's updated when user logout/login
        var timezone = localStorage.getItem('realTimezone')
            ? localStorage.getItem('realTimezone')
            : moment.tz.guess();

        /* Get the period */
        if (jQuery('select[name="period"]').val() === '') {
            start = moment.tz(
                jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val(),
                timezone
            );
            end = moment.tz(
                jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val(),
                timezone
            );
            duration = moment.duration(end.diff(start));
        } else {
            parseInterval = jQuery('select[name="period"]').val().match(/(\d+)([a-z]+)/i);
            duration = moment.duration(
                parseInt(parseInterval[1], 10),
                parseInterval[2]
            );
            start = moment().tz(timezone);
            end = moment().tz(timezone);
            start.subtract(parseInterval[1], parseInterval[2]);
        }

        e.preventDefault();
        baseUrl += '?&svcId=' + svcId + '&start=' + start.unix() + '&end=' + end.unix() + '&metric=' + metricId;
        window.location = baseUrl;
    });

    jQuery('.graphZone').delegate('.action > .bt_action', 'click', function () {
        var $elem = jQuery(this);
        var text = $elem.text();
        var duration;
        var parseInterval;
        var start;
        var end;

        if (jQuery('select[name="period"]').val() === '') {
            start = moment(jQuery('input[name="alternativeDateStartDate"]').val() + ' ' + jQuery('#StartTime').val());
            end = moment(jQuery('input[name="alternativeDateEndDate"]').val() + ' ' + jQuery('#EndTime').val());
            duration = moment.duration(end.diff(start));
        } else {
            parseInterval = jQuery('select[name="period"]').val().match(/(\d+)([a-z]+)/i);
            duration = moment.duration(
                parseInt(parseInterval[1], 10),
                parseInterval[2]
            );
            start = moment();
            end = moment();
            start.subtract(parseInterval[1], parseInterval[2]);
        }

        jQuery('select[name="period"]').val('');

        if (text === '<<') {
            end = start;
            jQuery('input[name="alternativeDateEndDate"]').val(end.format('YYYY-MM-DD'));
            jQuery('#EndDate').val(end.format(datepickerFormat));
            jQuery('#EndTime').val(end.format('HH:mm'));
            start.subtract(duration);
            jQuery('input[name="alternativeDateStartDate"]').val(start.format('YYYY-MM-DD'));
            jQuery('#StartDate').val(start.format(datepickerFormat));
            jQuery('#StartTime').val(start.format('HH:mm'));
        } else {
            start = end;
            jQuery('input[name="alternativeDateStartDate"]').val(start.format('YYYY-MM-DD'));
            jQuery('#StartDate').val(start.format(datepickerFormat));
            jQuery('#StartTime').val(start.format('HH:mm'));
            end.add(duration);
            jQuery('input[name="alternativeDateEndDate"]').val(end.format('YYYY-MM-DD'));
            jQuery('#EndDate').val(end.format(datepickerFormat));
            jQuery('#EndTime').val(end.format('HH:mm'));
        }
        changePeriod();
    });

    /* Active drag and drop */
    jQuery('.graphZone').sortable({
        handle: '.title',
    });
});
</script>
{/literal}
