{% load app_filters %}
<tr id="client_details" class="client-detail-inner">
	<td colspan="10" class="no-padding">
		<table id="data-table" class="cl-table" width="100%" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<th>
                    <div class="dropdown-all">
                        <select id="year_dd">
						{% for val in year %}
							<option value="{{val}}">{{val}}</option>
						{% endfor %}
						</select>
                    </div>
				</th>
				<th>
					<b>Total</b>
				</th>	
				{% for month in monthlist %}
					<th>
					{{month}}
					</th>
				{% endfor%}
			</tr>
		</thead>
		<tbody>

			<!-- Numbers section -->
			<tr class="ch-tr">
				<td class="ch-td-clk">
					<i></i><b>Numbers</b>
				</td>
				<td>
					<b class="blue">{{sumnumtypetotal}}</b>
				</td>
				{% for data in number_total %}
					<td>
					{{data}}
					</td>
				{% endfor%}
			</tr>
			{% for key, val in number %}
			<tr class="ch-td-val">
				<td>{{key}}</td>
				<td>{{val.total}}</td>
				<td>{{val.0}}</td><td>{{val.1}}</td><td>{{val.2}}</td><td>{{val.3}}</td>
				<td>{{val.4}}</td><td>{{val.5}}</td><td>{{val.6}}</td><td>{{val.7}}</td>
				<td>{{val.8}}</td><td>{{val.9}}</td><td>{{val.10}}</td><td>{{val.11}}</td>
			</tr>
			{% endfor %}

			<!-- Calls section -->
			<tr class="ch-tr">
				<td class="ch-td-clk">
					<i></i><b>Calls</b>
				</td>
				<td>
					<b class="blue">{{sumcalldettotal}}</b>
				</td>
				{% for data in call_total %}
					<td>
					{{data}}
					</td>
				{% endfor%}
			</tr>
			{% for key, val in call %}
			<tr class="ch-td-val">
				<td>{{key|string_upper}}</td>
				<td>{{val.total}}</td>
				<td>{{val.0}}</td><td>{{val.1}}</td><td>{{val.2}}</td><td>{{val.3}}</td>
				<td>{{val.4}}</td><td>{{val.5}}</td><td>{{val.6}}</td><td>{{val.7}}</td>
				<td>{{val.8}}</td><td>{{val.9}}</td><td>{{val.10}}</td><td>{{val.11}}</td>
			</tr>
			{% endfor %}

			<!-- Duration section -->
			<tr class="ch-tr">
				<td class="ch-td-clk">
					<i></i><b>Duration</b> (Sec.)
				</td>
				<td>
					<b class="blue">{{sumdurationdettotal}}</b>
				</td>
				{% for data in duration_total %}
					<td>
					{{data}}
					</td>
				{% endfor%}
			</tr>
			{% for key, val in duration %}
			<tr class="ch-td-val">
				<td>{{key|string_upper}}</td>
				<td>{{val.total}}</td>
				<td>{{val.0}}</td><td>{{val.1}}</td><td>{{val.2}}</td><td>{{val.3}}</td>
				<td>{{val.4}}</td><td>{{val.5}}</td><td>{{val.6}}</td><td>{{val.7}}</td>
				<td>{{val.8}}</td><td>{{val.9}}</td><td>{{val.10}}</td><td>{{val.11}}</td>
			</tr>
			{% endfor %}

			<!-- Invoice section -->
			<tr class="ch-tr">
				<td class="ch-td-clk">
					<i></i><b>Invoice</b>
				</td>
				<td>
					<b class="blue">${{sumnumpurdettotal|amount_format}}</b>
				</td>
				{% for data in invoiceTotal %}
					<td>
					${{data|amount_format}}
					</td>
				{% endfor%}
			</tr>	
			<tr class="ch-td-val">
				<td class="ch-td-clk">
					Number
				</td>
				<td>
					<b>${{TotalnumberPurcahse|amount_format}}</b>
				</td>
				{% for data in numberPurchase %}
					<td>
					${{data|amount_format}}
					</td>
				{% endfor%}
			</tr>
			<tr class="ch-td-val">
			<!-- agency-call-details-invoice in html folder	-->				
				<td class="ch-td-clk">
					Duration
				</td>
				<td>
					<b>${{sumcallcostdettotal|amount_format}}</b>
				</td>
				{% for data in cost_total %}
					<td>
					${{data|amount_format}}
					</td>
				{% endfor%}
			</tr>
		</tbody>
		</table>
	</td>

</tr>
<script>
	$("#year_dd").select2({});
</script>