{% 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>
{% 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">
		.record_list.report_fixed_table
		{
			table-layout: fixed;
		}
		.record_list .report_fixed_value
		{
			/*width: 120px;*/
		}
	</style>
{% endblock head_style_extra %} 

{% block page_header %}
<div class="row">
	<div class="col-md-12">
		<button type="button"  class="btn btn-sm btn-default" onclick="javascript:self.location='{{ path('detailed_ledger_report', {'_format':'pdf'}|merge(app.request.query.all)) }}'">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 ['from_date', 'to_date', 'group_by_c', 'group_by_p', 'account'] %}
					<input type="hidden" name="{{ k }}" value="{{ v }}" />
				{% endif %}
			{% endfor %}
			<div class="filter">
				<label for="sel_from_date">From</label>
				<div class="form-group">
					<div class='input-group date' id='sel_from_date' name='sel_from_date' style="width:140px">
						<input type='text' class="form-control" placeholder="From Date" name="from_date" value="{{ app.request.get('from_date') }}"/>
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
				</div>
				<label for="sel_to_date">To</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="group_by_p">Separate Periods</label>
				<select class="form-control" name="group_by_p" id="group_by_p" onchange="toggleSeparateBySelect('p', 'c');" style="width:150px">
				  <option value="">No</option>
				  <option value="1"{% if app.request.get('group_by_p') == '1' %} selected="selected"{% endif %}>Yes</option>
				</select>
				<label for="group_by_c">Separate Customers</label>
				<select class="form-control" name="group_by_c" id="group_by_c" onchange="toggleSeparateBySelect('c', 'p');" style="width:150px">
				  <option value="">No</option>
				  <option value="1"{% if app.request.get('group_by_c') == '1' %} selected="selected"{% endif %}>Yes</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>Detailed Ledger</code> records
			</div>
		{% endif %}
	</div>
</div>
{% endblock page_header %}

{% block content %}
<div>
	  {% include 'D2BillingBundle:DetailedLedgerReport:list.html.twig' with {'accounts_data': accounts_data, 'periods_data': periods_data, 'transactions_data': transactions_data, 'opening_balance': opening_balance} %}
</div>			
{% endblock content %}