<template>
	<div>
		<div v-if="pg" class="overflow-x-auto">
			<table class="text w-full text-sm">
				<thead>
					<tr class="text-gray-600">
						<th class="border-b py-3 pr-2 text-left font-normal">
							Description
						</th>
						<th class="border-b py-3 pr-2 text-left font-normal">Site</th>
						<th
							class="whitespace-nowrap border-b py-3 pr-2 text-right font-normal"
						>
							Rate
						</th>
						<th class="border-b py-3 pr-2 text-right font-normal">Amount</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(row, i) in pg.items" :key="row.idx">
						<td class="border-b py-3 pr-2">
							{{ row.description || row.document_name }}
						</td>
						<td class="border-b py-3 pr-2">
							{{ row.site || '-' }}
						</td>
						<td class="border-b py-3 pr-2 text-right">
							{{ row.rate }} x {{ row.quantity }}
						</td>
						<td class="border-b py-3 pr-2 text-right font-semibold">
							{{ pg.formatted.items[i].amount }}
						</td>
					</tr>
				</tbody>
				<tfoot>
					<tr v-if="pg.total_discount_amount > 0">
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-semibold">
							Total Without Discount
						</td>
						<td
							class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
						>
							{{ pg.formatted.total_before_discount }}
						</td>
					</tr>
					<tr v-if="pg.total_discount_amount > 0">
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-semibold">
							Total Discount Amount
						</td>
						<td
							class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
						>
							{{
								pg.partner_email && pg.partner_email != $account.team.user
									? 0
									: pg.formatted.total_discount_amount
							}}
						</td>
					</tr>
					<tr v-if="pg.gst > 0">
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-semibold">
							Total (Without Tax)
						</td>
						<td
							class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
						>
							{{ pg.formatted.total_before_tax }}
						</td>
					</tr>
					<tr v-if="pg.gst > 0">
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-semibold">
							IGST @ {{ Number($account.billing_info.gst_percentage * 100) }}%
						</td>
						<td
							class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
						>
							{{ pg.formatted.gst }}
						</td>
					</tr>
					<tr>
						<td></td>
						<td class="pb-2 pr-2 pt-4 text-right font-semibold">Grand Total</td>
						<td
							class="whitespace-nowrap pb-2 pr-2 pt-4 text-right font-semibold"
						>
							{{
								pg.partner_email && pg.partner_email != $account.team.user
									? pg.formatted.total_before_discount
									: pg.formatted.total
							}}
						</td>
					</tr>
					<template v-if="pg.total !== pg.amount_due && pg.pagestatus == 1">
						<tr>
							<td></td>
							<td class="pr-2 text-right">Applied Balance:</td>
							<td class="whitespace-nowrap py-3 pr-2 text-right font-semibold">
								- {{ pg.formatted.applied_credits }}
							</td>
						</tr>
						<tr>
							<td></td>
							<td class="pr-2 text-right">Amount Due:</td>
							<td class="whitespace-nowrap py-3 pr-2 text-right font-semibold">
								{{ pg.formatted.amount_due }}
							</td>
						</tr>
					</template>
				</tfoot>
			</table>
		</div>
		<div class="py-20 text-center" v-if="$resources.pg.loading">
			<Button :loading="true">Loading</Button>
		</div>
	</div>
</template>
<script>
export default {
	name: 'InvoiceUsageTable',
	props: ['invoice', 'invoiceDoc'],
	resources: {
		pg() {
			return {
				url: 'jcloud.api.billing.get_invoice_usage',
				params: { invoice: this.invoice },
				auto: this.invoice,
				onSuccess(pg) {
					this.$emit('pg', pg);
				}
			};
		}
	},
	watch: {
		invoice(value) {
			if (value) {
				this.$resources.pg.fetch();
			}
		}
	},
	computed: {
		pg() {
			return this.invoiceDoc || this.$resources.pg.data;
		}
	}
};
</script>
