{% extends "base.html" %}

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}ecm/css/jquery-ui-1.8.13.custom.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}accounting/css/classes.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}hr/css/classes.css" />
{% endblock %}

{% block headtitle %}Wallets Journal{% endblock %}


{% block breadcrumbs %}
<li><a href="/">Home</a></li>
<li><a href="/accounting/">Accounting</a></li>
<li class="active"><a href="/accounting/journal/">Journal</a></li>
{% endblock %}

{% block main_content %}
<div class="page-header">
	<h1>Wallets Journal <small>last update {{ scan_date|ecm_datetime }}</small></h1>
</div>

<form id="search_form" class="form-search form-inline btn-toolbar center">
    <div class="btn-group">
    	<i class="icon-search"></i>
    	<input type="text" id="search_text" class="input-small search-query" value="" />
	</div>
    <div style="display: inline;">
	  	<span class="label label-info">Amount</span>
	  	<select id="comp_selector" class="span1">
		   	<option value="eq">==</option>
		   	<option value="neq">&lt;&gt;</option>
		   	<option value="gte">&gt;=</option>
		   	<option value="gt">&gt;</option>
		   	<option value="lte">&lt;=</option>
		   	<option value="lt">&lt;</option>
	    </select>
	  	<input type="number" id="amount_text" class="input-small search-query" value="" />
    </div>
    <div style="display: inline;">
		<span class="label label-info"><i class="icon-calendar icon-white"></i>Period</span>
		<select id="period_selector" class="input-small">
			<option value="all" selected="selected">All Time</option>
			<option value="thismonth">This Month</option>
			<option value="week">Last Week</option>
			<option value="month">Last Month</option>
			<option value="year">Last Year</option>
		</select>
	</div>
	<div style="display: inline;">
		<span class="label label-info">From</span>
		<input type="text" id="from_date" name="from_date" value="{{ from_date }}" class="input-small" />
	</div>
	<div style="display: inline;">
		<span class="label label-info">To</span>
		<input type="text" id="to_date" name="to_date" value="{{ to_date }}" class="input-small" />
	</div>
	<div class="btn-group">
    	<button type="submit" id="search_button" class="btn btn-small"><i class="icon-search"></i> Search</button>
    	<button type="submit" id="clear_search" class="btn btn-small">Reset</button>
	</div>
</form>

<div class="btn-toolbar center form-inline">
    <div style="display: inline;">
	    <span class="label label-important">Wallet</span>
	    <select id="wallet_selector" class="error">{% for w in wallets %}
	      <option value="{{ w.walletID }}"{% if w.selected %} selected{% endif %}>{{ w.name }}</option>
	    {% endfor %}</select>
	</div>
	<div style="display: inline;">
	    <span class="label label-important">Operation</span>
	    <select id="type_selector" class="error">{% for et in entryTypes %}
	      <option value="{{ et.refTypeID }}"{% if et.selected %} selected{% endif %}>{{ et.refTypeName }}</option>
	    {% endfor %}</select>
	</div>
</div>

<table class="table table-bordered table-condensed" id="journal_table">
  <thead>
    <tr>
      <th class="top" scope="col" >Date</th>
      <th class="top" scope="col" >Wallet</th>
      <th class="top" scope="col" >Operation</th>
      <th class="top" scope="col" >From</th>
      <th class="top" scope="col" >To</th>
      <th class="top" scope="col" >Amount</th>
      <th class="top" scope="col" >Balance</th>
      <th class="top" scope="col" style="display:none;">Reason</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="7" class="dataTables_empty">Loading data from server...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Date</th>
      <th>Wallet</th>
      <th>Operation</th>
      <th>From</th>
      <th>To</th>
      <th>Amount</th>
      <th>Balance</th>
      <th style="display:none;">Reason</th>
    </tr>
  </tfoot>

</table>
{% endblock %}


{% block compressed_javascripts %}
<script type="text/javascript" src="{{ STATIC_URL }}ecm/js/lib/jquery.ui.js"></script>
{% endblock %}


{% block post_javascripts %}
<script type="text/javascript">

FROM_DATE = "{{ from_date }}";
TO_DATE = "{{ to_date }}";
DAY = 1000 * 60 * 60 * 24;
WEEK = DAY * 7;
MONTH = DAY * 30;
YEAR = DAY * 365;

$(document).ready(function() {
    var table = $('#journal_table').dataTable($.extend(true, {}, DATATABLE_DEFAULTS, {
        sAjaxSource: "/accounting/journal/data/",
        aoColumns: [
            { /* Date */       sWidth: "14%",   sType: "string" },
            { /* Wallet */     sWidth: "15%",   sType: "html"    },
            { /* Operation */  sWidth: "10%",   sType: "string",    bSortable: false },
            { /* From */       sWidth: "15%",    sType: "html",  bSortable: false },
            { /* To */         sWidth: "15%",   sType: "html",  bSortable: false  },
            { /* Amount */     sWidth: "15%",   sType: "string" , sClass : "right" },
            { /* Balance */    sWidth: "15%",   sType: "string",  bSortable: false,  sClass : "right" },
            { /* reason -> HIDDEN */ bVisible: false }
        ],
        fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            if (aData[5].charAt(0) == '+') {
                $('td:eq(5)', nRow).addClass('journal-credit');
            } else {
                $('td:eq(5)', nRow).addClass('journal-debit');
            }
            /* hide reason column */
            $('td:eq(7)', nRow).hide()

            /* set titles tooltip on each row */
            reason = aData[7]
            if (reason != "") {
                $('td:eq(5)', nRow).attr("title", reason)
                $('td:eq(5)', nRow).cluetip({
                    splitTitle: '|',
                    dropShadow: false,
                    cluetipClass: 'jtip',
                    positionBy: 'mouse',
                    tracking: true
                });
            }

            return nRow;
        },

        /* this function will be called when the table has to query data to be displayed */
        fnServerData: function ( sSource, aoData, fnCallback ) {
            /* Add some extra variables to the url */
            aoData.push( {
                name: "walletID",
                value: $("#wallet_selector option:selected").val()
            },{
                name: "entryTypeID",
                value: $("#type_selector option:selected").val()
            },{
                name: "amount",
                value: $("#amount_text").val()
            },{
                name: "comparator",
                value: $("#comp_selector option:selected").val()
            },{
                name: "from_date",
                value: $("#from_date").val()
            },{
                name: "to_date",
                value: $("#to_date").val()
            } );

            $.getJSON( sSource, aoData, function (json) {
                fnCallback(json)
            } );
        },
    }));

  /* trigger the search when pressing return in the text field */
    $("#search_form").submit(function(event) {
        event.preventDefault();
        table.fnFilter($("#search_text").val());
    });

    /* trigger the search when clicking the "search" button */
    $("#search_button").click(function() {
        table.fnFilter($("#search_text").val());
    });

    /* reset the search when clicking the "reset" button */
    $("#clear_search").click(function() {
        $("#search_text").val("");
        $("#amount_text").val("");
        table.fnFilter("");
    });

    $("#wallet_selector").change(function () {
        table.fnDraw();
    });

    $("#type_selector").change(function () {
        table.fnDraw();
    });
    
    $("#period_selector").change(function() {
        var period = $("#period_selector option:selected").val();
        if (period == "all") {
            $("#from_date").val(FROM_DATE);
            $("#to_date").val(TO_DATE);
        } else if (period == "thismonth") {
            var date = $.datepicker.parseDate('yy-mm-dd', TO_DATE);
            date.setTime(Date.UTC(date.getFullYear(),date.getMonth(),1));
            $("#from_date").val($.datepicker.formatDate("yy-mm-dd", date));
            $("#to_date").val(TO_DATE);
        } else if (period == "week") {
            var date = $.datepicker.parseDate('yy-mm-dd', TO_DATE);
            date.setTime(date.getTime() - WEEK);
            $("#from_date").val($.datepicker.formatDate("yy-mm-dd", date));
            $("#to_date").val(TO_DATE);
        } else if (period == "month") {
            var date = $.datepicker.parseDate('yy-mm-dd', TO_DATE);
            date.setTime(date.getTime() - MONTH);
            $("#from_date").val($.datepicker.formatDate("yy-mm-dd", date));
            $("#to_date").val(TO_DATE);
        } else if (period == "year") {
            var date = $.datepicker.parseDate('yy-mm-dd', TO_DATE);
            date.setTime(date.getTime() - YEAR);
            $("#from_date").val($.datepicker.formatDate("yy-mm-dd", date));
            $("#to_date").val(TO_DATE);
        }
    });

    $(function() {
        var dates = $( "#from_date, #to_date" ).datepicker({
            dateFormat: 'yy-mm-dd',
            defaultDate: "{{ to_date }}",
            changeMonth: true,
            numberOfMonths: 1,
            onSelect: function( selectedDate ) {
                var option = this.id == "from_date" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
    
     /* disable multi column sorting */
    $('#member_contrib_table thead th').click(function(event) {
        if (!$(event.target).hasClass('sorthandle')) {
            event.shiftKey = false;
        }
    });

} );
</script>
{% endblock %}