<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>Receipt</title>

	<style>
		.invoice-box {
			max-width: 800px;
			margin: auto;
			padding: 30px;
			border: 1px solid #eee;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
			font-size: 12px;
			line-height: 24px;
			font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
			color: #555;
		}

		.invoice-box table {
			width: 100%;
			line-height: inherit;
			text-align: left;
		}

		.invoice-box table td {
			padding: 5px;
			vertical-align: top;
		}

		.invoice-box table tr td:nth-child(2) {
			text-align: right;
		}

		.invoice-box table tr.top table td {
			padding-bottom: 20px;
		}

		.invoice-box table tr.top table td.title {
			font-size: 45px;
			line-height: 45px;
			color: #333;
		}

		.invoice-box table tr.information table td {
			padding-bottom: 40px;
		}

		.invoice-box table tr.heading td {
			background: #eee;
			border-bottom: 1px solid #ddd;
			font-weight: bold;
		}

		.invoice-box table tr.details td {
			padding-bottom: 20px;
		}

		.invoice-box table tr.item td {
			border-bottom: 1px solid #eee;
		}

		.invoice-box table tr.item.last td {
			border-bottom: none;
		}

		.invoice-box table tr.total td:nth-child(2) {
			border-top: 2px solid #eee;
			font-weight: bold;
		}

		@media only screen and (max-width: 600px) {
			.invoice-box table tr.top table td {
				width: 100%;
				display: block;
				text-align: center;
			}

			.invoice-box table tr.information table td {
				width: 100%;
				display: block;
				text-align: center;
			}
		}

		/** RTL **/
		.invoice-box.rtl {
			direction: rtl;
			font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
		}

		.invoice-box.rtl table {
			text-align: right;
		}

		.invoice-box.rtl table tr td:nth-child(2) {
			text-align: left;
		}
	</style>
</head>

<body>
	<div class="invoice-box">
		<table cellpadding="0" cellspacing="0">
			<tr class="top">
				<td colspan="2">
					<table>
						<tr>
							<td class="title">
								<img src="{{asset('admin/assets/img/icons/spot-illustrations/falcon.png')}}" style="width: 100%; max-width: 90px" />
							</td>

							<td>

							</td>
						</tr>
					</table>
				</td>
			</tr>

			<tr class="information">
				<td colspan="2">
					<table>
						<tr>
							<td>
								MBBS<br />
								Mbabane<br />
								P.O.Box
							</td>

							<td>
								Name: {{$member->name}}<br />
								Policy #: {{$member->national_id}}<br />
								Email: {{$member->email}}
							</td>
						</tr>
					</table>
				</td>
			</tr>

			<tr class="heading">
				<td>STATEMENT</td>

				<td></td>
			</tr>

			<tr class="details">
				<td></td>

				<td></td>
			</tr>


			<tr>
				<td colspan="2">
					<table>
						<tr class="heading">
							<td>Date</td>
							<td>Months paid for</td>
							<td>Total Amount</td>
							<td>Premium Amount</td>
							<td>Total benefits</td>
							<td>Payment Method</td>
						</tr> @foreach ($payments as $payment)
						<tr>
							<td>{{$payment->payment_date}}</td>
							<td>{{$payment->months}}</td>
							<td>{{$payment->amount_paid}}</td>
							<td>{{$premium->amount}}</td>
							<td>{{$payment->amount_paid - ($premium->amount * $payment->months)}}</td>
							<td>{{$payment->mode->name}}</td>
						</tr>
						@endforeach
					</table>
			</tr>


			<tr class="heading">
				<td>Months covered</td>
				<td></td>
			</tr>
			@foreach ($covers as $cover)
			<tr class="item">
				<td>{{ date ('F-Y', strtotime($cover->months))}}</td>
				<td></td>
			</tr>
			@endforeach

			<tr class="heading">
				<td>Arrears</td>
				<td></td>
			</tr>
			@foreach ($arrears as $arrear)
			<tr class="item">
				<td>{{ date ('F-Y', strtotime($arrear->months))}}</td>
				<td></td>
			</tr>
			@endforeach
			
		</table>
		<center>
			<p>Statement generated by: {{$user->name}} {{$user->surname}} </p>
			<h3>Thank you!</h3>
		</center>
	</div>
</body>

</html>