{% extends 'D2BillingBundle::layout.html.twig' %}

{% block head_script_extra %}
	<script src="{{ asset('bundles/d2billing/js/reports.js') }}" type="text/javascript"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="{{ asset('bundles/d2core/js/datetimepicker_utils.js') }}"></script>
	<script type="text/javascript">
	/*
	$(function() {
		$('#month-picker').datepicker( {
			changeMonth: true,
			changeYear: true,
			showButtonPanel: true,
			dateFormat: 'MM yy',
			onClose: function(dateText, inst) { 
				var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
				var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
				$(this).datepicker('setDate', new Date(year, month, 1));
			},
			beforeShow : function(input, inst) {
				if ((datestr = $(this).val()).length > 0) {
					year = datestr.substring(datestr.length-4, datestr.length);
					month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
					$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
					$(this).datepicker('setDate', new Date(year, month, 1));
				}
			}
		});
		$('#month-picker').focus(function () {
			$('.ui-datepicker-calendar').addClass('hideDates');
		});
	});
	*/
	</script>
{% endblock head_script_extra %} 

{% block head_style_extra %}
 	<link href="{{ asset('bundles/d2core/css/select_add.css') }}" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
	<style type="text/css">
	  .ui-datepicker-calendar, .ui-datepicker-current {
		display: none;
	  }
	  #month-picker {
		  border: 1px solid #CCCCCC;
		  border-radius: 3px 3px 3px 3px;
		  color: #808080;
		  display: inline-block;
		  padding: 4px;
		  width: 94px;
		  font-size: 11px;
	  }
	  .record_list.report_fixed_table
	  {
	   table-layout: fixed;
	  }
	  .record_list .report_fixed_value
	  {
	   width: 150px;
	  }
	</style>
{% endblock head_style_extra %}

{% block page_header %}
    <button type="button"  class="btn btn-sm btn-default" onclick="self.location='{{ path('d2_billing_age_analysis_report_format', { '_format': 'pdf' }) }}{% if app.request.query is not empty %}?{% endif %}{% for k, v in app.request.query %}{{ k }}={{ v }}{% if loop.last != true %}&{% endif %}{% endfor %}';">PDF</button>
    <div class="clearfix"></div>
	<hr/>
	<form class="filter_form form-inline pull-right" role="form" method="get">
		{% for k, v in app.request.query %}
			{% if k|lower not in ['to_date', 'age', 'group_by_cat', 'terms', 'account'] %}
				<input type="hidden" name="{{ k }}" value="{{ v }}" />
			{% endif %}
		{% endfor %}
		<div class="filter">
			<label for="sel_to_date">End Date</label>
			<div class="form-group">
				<div class='input-group date' id='sel_to_date' name='sel_to_date' style="width:140px">
					<input type='text' class="form-control" placeholder="To Date" name="to_date" value="{{ app.request.get('to_date') }}"/>
					<span class="input-group-addon">
						<span class="glyphicon glyphicon-calendar"></span>
					</span>
				</div>
			</div>
	        <label for="age">Age</label>
	        <select class="form-control" name="age" style="width:150px">
	          <option value=""></option>
	          <option value="0"{% if app.request.get('age') == '0' %} selected="selected"{% endif %}>Current</option>
	          <option value="30"{% if app.request.get('age') is null or app.request.get('age') == '30' %} selected="selected"{% endif %}>30 Days</option>
	          <option value="60"{% if app.request.get('age') == '60' %} selected="selected"{% endif %}>60 Days</option>
	          <option value="90"{% if app.request.get('age') == '90' %} selected="selected"{% endif %}>90 Days</option>
	          <option value="120"{% if app.request.get('age') == '120' %} selected="selected"{% endif %}>120 Days</option>
	        </select>
	        <label for="group_by_cat">View</label>
	        <select class="form-control" name="group_by_cat">
	          <option value="">All</option>
	          <option value="1"{% if app.request.get('group_by_cat') == '1' %} selected="selected"{% endif %}>By Category</option>
	        </select>
	        <label for="terms">Period</label>
	        <select class="form-control" name="terms">
	          <option value="">Terms</option>
	          <option value="monthly"{% if app.request.get('terms') == 'monthly' %} selected="selected"{% endif %}>Monthly</option>
	        </select>
			<label for="account">Account</label>
			<input type="text" class="form-control" name="account" id="filter_account" placeholder="Search for" style="width:200px" value="{{ app.request.get('account') }}">
			
			<div class="btn-group">
				<button type="submit" class="btn btn-default">Go</button>
				<button type="button" class="btn btn-default clear_filter">Clear</button>
			</div>
		</div>
	</form>
	<div class="clearfix"></div>
	  {% if records_count > 0 %}
	    <div class="record_list_count">Displaying 
	      {{ records_count }}
	      <code>Age Analysis</code> records
	    </div>
	  {% endif %}
{% endblock page_header %}

{% block content %}
	<div>
		  {% include 'D2BillingBundle:AgeAnalysisReport:list.html.twig' with {'transactions_data': transactions_data, 'account_categories_data': account_categories_data, 'from_and_to': from_and_to, 'records_count': records_count} %}
	</div>			
{% endblock %}