<ol class="breadcrumb">
	<li><a href="#/">Dashboard</a></li>
	<li>Settings</li>
	<li class="active">Billing</li>
</ol>

<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<tabset tab-theme="orange" tab-position="top">
				<tab heading="General Information">
					<table class="table">
						<tbody>
							<tr>
								<th width="15%">Plan:</th>
								<td>{{ vm.company.stripe.subscriptions.data[0].plan.name }}</td>
							</tr>
							<tr>
								<th>Amount:</th>
								<td>{{ vm.company.stripe.subscriptions.data[0].plan.amount/100 | currency: "$" }}</td>
							</tr>
							<tr>
								<th>Frequency:</th>
								<td>{{ vm.company.stripe.subscriptions.data[0].plan.interval | uppercase }}</td>
							</tr>
							<tr>
								<th>Payment Method:</th>
								<td>{{ vm.company.stripe.sources.data[0].brand }} ending in {{ vm.company.stripe.sources.data[0].last4 }} <br /> 
								Expires on {{ vm.company.stripe.sources.data[0].exp_month }}/{{ vm.company.stripe.sources.data[0].exp_year }} <br />
								<a class="btn btn-sm btn-primary" style="margin-top: 15px;" ng-click="vm._changePaymentMethod()">Change Payment Method</a>
								</td>
							</tr>
						</tbody>
					</table>
				</tab>
				<tab heading="Invoices">
					<table class="table">
						<thead>
							<tr>
								<th width="15%"><b>#</b></th>
								<th><b>Date</b></th>
								<th><b>Amount Due</b></th>
								<th><b>Amount Paid</b></th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="invoice in vm.company.invoices">
								<td>
									<a href="{{ invoice['invoice_pdf'] }}" target="_blank">
										{{ invoice['number'] }}
									</a>
								</td>
								<td>{{ invoice['date'] }}</td>
								<td>{{ invoice['amount_due'] | currency: "$" }}</td>
								<td>{{ invoice['amount_paid'] | currency: "$" }}</td>
							</tr>
							<tr ng-if="!vm.company.invoices.length">
								<td colspan="5" class="text-center">No invoices found</td>
							</tr>
						</tbody>
					</table>
				</tab>
			</tabset>
		</div>
	</div>
</div>

<ng-include src="'views/modals/changePaymentMethodModal.html'"></ng-include>
