{% extends 'base_print.html.twig' %}

{% block title %}Service Book
{% endblock %}

{% block styles %}
	<style>
		h1 {
			text-align: center;
			border-bottom: 1px solid #000;
			margin: 0;
		}
		h2 {
			page-break-before: always;
		}
		.details th {
			text-align: left;
		}
		table {
			border-collapse: collapse;
			broder: 1px solid #000;
			width: 100%;
			max-width: 100%;
			page-break-inside: avoid;
		}
		th,
		td {
			border: 1px solid #000;
			padding: 5px;
		}
		ul {
			list-style-type: none;
		}
	</style>
{% endblock %}

{% block content %}
	<h1>Details Receipt</h1>
	<div style="font-size: 16px;">
		<span style=" margin-left: 6px; font-size: 20px; margin-left: 377px;">
			<strong style=" margin-left: 6px; font-size: 20px; margin-left: 377px;">
				Civil Hospital Ahmedabad - {{name}}</strong>
		</span>
	</div>

	<div class="row" ">
		<div style="float: left; width: 50%;">
			<p style="color: #7e8d9f;font-size: 13px; padding: 6px; margin-left: 4px;">
				<span style="font-weight: 600;">Patient Details :</span>
			</p>
		</div>
		<div style="float: right; width: 50%;">
			<p style="color: #7e8d9f;font-size: 13px; padding: 6px;	float: right; margin-right: 17px;">
				<span style="font-weight: 600;">MRD NO :</span>	11203</p>
		</div>
	</div>

	<div class="row" style="padding: 102px;">
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<ul class="list-unstyled">
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Name :</span>
					<span style="color:#74788d ; ">John Lorem</span>
				</li>
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Address:</span>
					<span style="color:#74788d ;">Street,
													City, State, Country</span>
				</li>
				<li class="text-muted">
					<span class="fw-bold">
						<span style="color:#53585b ; font-weight: 400;">Date Of visit:</span>
					</spanstyle="color:#74788d;">Jun 23,2021</li>
				<li class="text-muted">
					<span class="fw-bold">
						<span style="color:#53585b ; font-weight: 400;">Discharge:</span>
					</spanstyle="color:#74788d;">Jun 23,2021</li>
			</ul>
		</div>
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<ul class="list-unstyled">
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Age:</span>
					<span style="color:#74788d ;">27</span>
				</li>
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Contact No:</span>
					<span style="color:#74788d ;">
						123-456-789</span>
				</li>
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Net payment:</span>
					<span style="color:#74788d ;">27,000</span>
				</li>
			</ul>
		</div>
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<ul class="list-unstyled">
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">M/F:</span>
					<span style="color:#74788d ;">Male</span>
				</li>
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Email ID:</span>
					<span style="color:#74788d ;">
						<i class="fas fa-email"></i>
						hospital@gmail.com</span>
				</li>
				<li class="text-muted">
					<span style="color:#53585b ; font-weight: 400;">Cash/card/Gpay/Net banking:</span>
					<span style="color:#74788d ;">Net banking</span>
				</li>
			</ul>
		</div>
	</div>
	<br>
	<table>
		<thead>
			<tr>
				<th scope="col">#</th>
				<th scope="col">Procedure</th>
				<th scope="col">No. of Procedures</th>
				<th scope="col">Charges</th>
				<th scope="col">GST</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Case</td>
				<td>1</td>
				<td>4,000</td>
				<td>1,000</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Injection Charges</td>
				<td>1</td>
				<td>9,010</td>
				<td>1,200</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Dressing Charges</td>
				<td>1</td>
				<td>10,000</td>
				<td>6,000</td>
			</tr>
			<tr>
				<th>4</th>
				<td>Cosumable Charges</td>
				<td>1</td>
				<td>9,100</td>
				<td>1,710</td>
			</tr>
			<tr>
				<th>5</th>
				<td>Total</td>
				<td>1</td>
				<td>4,000</td>
				<td>2,000</td>
			</tr>
		</tbody>
	</table>

	<div class="row" style="padding: 2px;">
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<ul>
				<li>
					<span>Advance paid :</span>
					1110</li>
				<li class="text-muted ms-3 mt-2">
					<span>
						Net
												Expenditure :</span>
					111</li>
				<li class="text-muted ms-3 mt-2">
					<span>
						Payble/refundable :</span>
					111</li>
			</ul>
		</div>
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<p style="text-align: center;">
				<span class="text-black me-3">
					Total Payment :
				</span>
				<span style="font-size: 20px;">
					1221</span>
			</p>
			<ul style="text-align: center;">
				<li>
					<span>Insurance
												Claim :
					</span>
					1110</li>
				<li class="text-muted ms-3 mt-2">
					<span>Discount :
					</span>(15%)</li>
			</ul>
			<p style="text-align: center;">
				<span class="text-black me-3">
					GST :
				</span>
				<span style="font-size: 15px;">(18%)</span>
			</p>
		</div>
		<div class="col-sm-4" style=" float: left; width: 33%;">
			<p style="text-align: right;">
				<span class="text-black me-3">
					Mode Payment :
				</span>
				<span style="font-size: 20px;">
					1221</span>
			</p>
			<ul style="text-align: right;">
				<li>
					<span>Company :
					</span>
					1110</li>
				<li class="text-muted ms-3 mt-2">
					<span>After
												Discount :</span>(08%)</li>
			</ul>
			<p style="text-align: right;">
				<span class="text-black me-3">
					Total :</span>
				<span style="font-size: 15px;">
					12,021</span>
			</p>
		</div>
	</div>

{% endblock %}