Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Invoice</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="{{ asset('themes/bootstrap/css/poppins.css') }}" rel="stylesheet">
	<style>
		body {
			background: rgba(249, 246, 244, 0.42);
			font-family: 'Poppins-Regular';
		}

		.title-head {
			font-size: 13px;
			color: #EFBFBF;
		}

		.title {
			font-family: 'Poppins-SemiBold' !important;
			font-style: normal;
			font-size: 17px;
			line-height: 100%;
			color: #EFBFBF;
		}

		.table th {
			font-family: 'Poppins-SemiBold' !important;
			font-style: normal;
			font-size: 18px;
			line-height: 100%;
			text-align: center;
			color: #EFBFBF;
		}

		.container {
			margin-left: 50px;
			padding-top:30px;
		}

		.header {
			font-family: 'Poppins-SemiBold' !important;
			font-style: normal;
			font-size: 36px;
			line-height: 100%;
			color: #3A3A3A;
		}

		.plan {
			font-weight: 400;
			color: #3A3A3A;
		}

		.info {
			position: absolute;
			left: 60%;
			right: 6.72%;
			top: 13%;
		}

		.value {
			display: flex;
			flex-wrap: nowrap;
			height: 20px;
			font-size: 13px;
			color: #3A3A3A;
		}

		.first-variables {
			margin-top: 70px;
		}

		.params {
			font-size: 13px;
			width: 110px;
			word-wrap: break-word;
			margin-left: 100px;
			margin-top: -28px;
			color: #3A3A3A;
		}

		.variable {
			margin-bottom: -20px;
		}

		.second-variables {
			position: absolute;
			left: 60%;
			right: 6.72%;
			top: 30.40%;
		}

		.table th {
			vertical-align: bottom;
			font-weight: bold;
			padding: 8px;
			line-height: 20px;
			text-align: left;
		}

		.table td, .table th {
			font-size: 14px;
			font-style: normal;
			font-weight: normal;
			line-height: 100%;
			color: #3A3A3A;
			padding: 8px;
			line-height: 20px;
			text-align: left;
			vertical-align: top;
			border-bottom: 1px solid #F9EBEA;
			border-bottom-width: 7%;
			height: 4%;
		}

		.table {
			width: 100%;
			margin-top: 80px;
			margin-left: -10px;
			/*margin-bottom: 45px;*/
		}

		.total {
			margin-left: 450px;
		}

		.final td {
			border-bottom: 1px solid rgba(249, 246, 244, 0.42) !important;
		}

		.final td:nth-child(2) {
			text-align: right;
		}
	</style>
</head>
<body>
	<div class="container" style="margin-top: -40px;">
		<span class="header">invoice</span><br>
		<span class="plan">Plan: {{ auth()->user()->getProduct($invoice->subscription)->name }}</span>
		<div class="info">
			<span class="title-head">number</span>
			<span class="value">Invoice {{ $invoice->number }}</span>
			<span class="title-head">date</span>
			<span class="value">{{ $invoice->date()->toFormattedDateString() }}</span>
		</div>
		@if(isset($to))
		<div class="first-variables">
			<div class="variable">
				<span class="title">
					to
				</span>
			</div>
			<div class="params">
				{!! $to->value !!}
			</div>
		</div>
		@endif
		<div class="@if(!isset($to)) first-variables @else second-variables @endif">
			<div class="variable">
				<span class="title">
					from
				</span>
			</div>
			<div class="params">
				{{ setting('billing.invoice.from')['invoice'] }}
			</div>
		</div>
		<!-- Invoice Table -->
		<table class="table" border="0">
			<tr>
				<th align="left">
					<span class="title">description</span>
				</th>
				<th align="right">
					<span class="title">date</span>
				</th>
				<th align="right">
					<span class="title">amount</span>
				</th>
			</tr>

			<!-- Existing Balance -->
			<tr>
				<td>Starting Balance</td>
				<td>&nbsp;</td>
				<td>{{ $invoice->startingBalance() }}</td>
			</tr>

			<!-- Display The Invoice Items -->
			@foreach ($invoice->invoiceItems() as $item)
			<tr>
				<td colspan="2">{{ $item->description }}</td>
				<td>{{ $item->total() }}</td>
			</tr>
			@endforeach

			<!-- Display The Subscriptions -->
			@foreach ($invoice->subscriptions() as $subscription)
			<tr>
				<td>Subscription ({{ $subscription->quantity }})</td>
				<td>
					{{ $subscription->startDateAsCarbon()->formatLocalized('%B %e, %Y') }} -
					{{ $subscription->endDateAsCarbon()->formatLocalized('%B %e, %Y') }}
				</td>
				<td>{{ $subscription->total() }}</td>
			</tr>
			@endforeach

			<!-- Display The Discount -->
			@if ($invoice->hasDiscount())
			<tr>
				@if ($invoice->discountIsPercentage())
				<td>{{ $invoice->coupon() }} ({{ $invoice->percentOff() }}% Off)</td>
				@else
				<td>{{ $invoice->coupon() }} ({{ $invoice->amountOff() }} Off)</td>
				@endif
				<td>&nbsp;</td>
				<td>-{{ $invoice->discount() }}</td>
			</tr>
			@endif

			<!-- Display The Tax Amount -->
			@if ($invoice->tax_percent)
			<tr>
				<td>Tax ({{ $invoice->tax_percent }}%)</td>
				<td>&nbsp;</td>
				<td>{{ Laravel\Cashier\Cashier::formatAmount($invoice->tax) }}</td>
			</tr>
			@endif

			<!-- Display The Final Total -->
			<tr class="final">
				<td>&nbsp;</td>
				<td style="margin-top: 5px !important;">
					<span class="title">
						total
					</span>
				</td>
				<td>
					<span style="font-family: 'Poppins-Bold' !important;">
						{{ $invoice->total() }}
					</span>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>