{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{% trans 'View Statistics' %} | {% trans 'Django site admin' %}{% endblock %}

{% block extrahead %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/chart/jquery.jqplot.min.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/chart/smoothness/jquery-ui.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL}}css/customization/Statistics.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL}}css/datepicker.css" />

<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.blockRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.pieRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery/jquery.blockUI.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/datepicker.js"></script>

<!--<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}subscribe/js/chart/plugins/jqplot.donutRenderer.js"></script>-->
{% endblock %}

{% block breadcrumbs %}
{% if not is_popup %}
<div class="breadcrumbs">
 <a href="{% url 'admin:index' %}">{% trans "Home" %}</a> &rsaquo;
 <a href="{% url 'admin:app_list' 'newsletter' %}">Newsletter</a> &rsaquo;
 <a href="{% url 'admin:newsletter_newsletter_changelist' %}">Newsletter</a> &rsaquo;
 {{ newsletter.title }}
</div>
{% endif %}
{% endblock %}

{% block content %}
<div id="maskDivParent">
 <h1>觀看統計 {{ startDate }} - {{ endDate }}</h1>
</div>
<div id="totalRates">
 <div id="totalRateTableParent">
  <p>關於表單項目的詳細說明請參考<a href="{% url 'Theophrastus.views.document' 'Statistics' %}">說明文件</a>去了解更多。</p>
  <div id="subscriberCountPie"></div>
 </div>
 {% include "TotalRate.html" %}
 
 <div class="controlBar">
  <div>
   <select id="changeDayRange">
    <option id='weekDayRange' value="week">{% trans "Last 7 days" %}</option>
    <option id='monthDayRange' value="month">{% trans "The last 1 month" %}</option>
    <option id='3monthDayRange' value="3month">{% trans "The last 3 months" %}</option>
    <option value="other">自訂時間區間</option>
   </select>
   <div id='customDayRange' style="display:inline">
    From <input class="inputDate" id="fromDate"/></p>
    To <input class="inputDate" id="toDate"/>
   </div>
  </div>
  <div>
   <span>{% trans "Change number / rate:" %}</span>
   <select id="displayMode">
    <option id='changeRateMode' value="rate">{% trans "Rate" %}</option>
    <option id='changeNumberMode' value="number">{% trans "Number" %}</option>
   </select>
  </div>
  <div>
   <span>資料統計方式</span>
   <select id="calculateMode">
    <option id='accMode' value="accumulate">累計</option>
    <option id='singleMode' value="single">單次</option>
   </select>
  </div>
  <div><button class="backBtn" type="button">返回時間選單</button></div>
  <span id="dateRange"></span>
 </div>
 <div id="loading"><img src="{{ STATIC_URL }}images/base/Load_24.gif" style="width:10px"/> loading...</div>
 <div id="totalChart"></div>
 {% include "TotalChart.html" %}
</div>
<script language="javascript" type="text/javascript">
/*var update = function(dateRange) {

    // Loading icon and mask.
    /*$('#maskDivParent').block({
        message: maskMessage,
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: 0.5,
            color: '#fff'
        }
    });*/

    /*var checkCompleteTimer = setInterval(function() {
        if (ajaxCounter == 7) {
            $('#loadingImg').remove();
            // Init loading counter value.
            ajaxCounter = 0;
            clearInterval(checkCompleteTimer);
        }
    }, 300);*/

//};

var dateType = 'range';

var getFormat = function() {
    var format = 'number';
    format = $('#displayMode :selected').val();
    return format;
};

var getCalculateMode = function() {
    var mode = 'single';
    mode = $('#calculateMode :selected').val();
    return mode;
};

var getDateRange = function() {
    var dateRange = $('#changeDayRange :selected').val();
    return dateRange
};

$('#customDayRange').hide();
$('.backBtn').hide();

$('#changeDayRange').change(function(){
    var $selectedValue = $('#changeDayRange :selected').val()
    if ($selectedValue == "other"){
        $('#changeDayRange').hide();
        $('#customDayRange').show();
        $('.backBtn').show();
        dateType = 'custom';
    }
    else{
        var dateRange = getDateRange();
        var format = getFormat();
        var mode = getCalculateMode();
        createTotalRateTable($('#totalRateTableParent'));
        createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode);
        dateType = 'range';
    }    
});

$('.backBtn').click(function(){
    $('#changeDayRange').show();
    $('#customDayRange').hide();
    $('.backBtn').hide();
    $('#changeDayRange').val("week");
    dateType = 'range';
});

$('#displayMode').change(function() {
    var isEvent = true;   
    var format = getFormat();
    var mode = getCalculateMode();

    if (dateType == 'range'){
        var dateRange = getDateRange();        
        createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode);
    }
    else if(dateType == 'custom'){
        var startDate = $('#fromDate').val();
        var endDate = $('#toDate').val();
        createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
    }
    
});

$('#calculateMode').change(function() {
    var isEvent = true;
    var format = getFormat();
    var mode = getCalculateMode();
    
    if (dateType == 'range'){
        var dateRange = getDateRange();        
        createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode);
    }
    else if(dateType == 'custom'){
        var startDate = $('#fromDate').val();
        var endDate = $('#toDate').val();
        createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
    }
    
});

$('#changeDayRange').change();

var getNowDate = function(){
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10) {
        dd='0'+dd
    } 
    if(mm<10) {
        mm='0'+mm
    } 
    today = yyyy+'/'+mm+'/'+dd;
    return today;
}
var getRangeDate = function(dateRange){
    var today = new Date();
    var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6);
    var lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
    var lastThreeMonth = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());

    var nowDay = today.getDate();
    var nowMonth = today.getMonth()+1;
    var nowYear = today.getFullYear();
    var pastDay = lastWeek.getDate();
    var pastMonth = lastWeek.getMonth()+1;
    var pastYear = lastWeek.getFullYear(); 

    if (dateRange==='week'){
        pastDay = lastWeek.getDate();
        pastMonth = lastWeek.getMonth()+1;
        pastYear = lastWeek.getFullYear();
        var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
        var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
        return '{% trans "Last 7 days" %} ' + pastDate + ' - ' + nowDate;
    }
    else if (dateRange==='month'){
        pastDay = lastMonth.getDate();
        pastMonth = lastMonth.getMonth()+1;
        pastYear = lastMonth.getFullYear();
        var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
        var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
        return '{% trans "The last 1 month" %} ' + pastDate + ' - ' + nowDate;
    }
    else if (dateRange==='3month'){
        pastDay = lastThreeMonth.getDate();
        pastMonth = lastThreeMonth.getMonth()+1;
        pastYear = lastThreeMonth.getFullYear();
        var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
        var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
        return '{% trans "The last 3 months" %} ' + pastDate + ' - ' + nowDate;
    }
    
}

// reference: http://www.eyecon.ro/datepicker/

$('#fromDate').val(getNowDate());
$('#toDate').val(getNowDate());
$('#weekDayRange').text(getRangeDate('week'));
$('#monthDayRange').text(getRangeDate('month'));
$('#3monthDayRange').text(getRangeDate('3month'));

$('#fromDate').DatePicker({
    format:'Y/m/d',
    date: $('#fromDate').val(),
    current: $('#fromDate').val(),
    starts: 1,
    position: 'r',
    onBeforeShow: function(){
        $('#fromDate').DatePickerSetDate($('#fromDate').val(), true);
    },
    onChange: function(formated, dates){
        $('#fromDate').val(formated);
        var startDate = $('#fromDate').val();
        var endDate = $('#toDate').val();
        var format = getFormat();
        var mode = getCalculateMode();
        createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
        if ($('#closeOnSelect input').attr('checked')) {
            $('#fromDate').DatePickerHide();
        }
    }
});

$('#toDate').DatePicker({
    format:'Y/m/d', 
    date: $('#toDate').val(),
    current: $('#toDate').val(),
    starts: 1,
    position: 'r',
    onBeforeShow: function(){
        $('#toDate').DatePickerSetDate($('#toDate').val(), true);
    },
    onChange: function(formated, dates){
        $('#toDate').val(formated);
        var startDate = $('#fromDate').val();
        var endDate = $('#toDate').val();
        var format = getFormat();
        var mode = getCalculateMode();
        createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
        $('#toDate').val(formated);
        if ($('#closeOnSelect input').attr('checked')) {
            $('#toDate').DatePickerHide();
        }
    }
});

</script>
{% endblock %}