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

{% block title %}Detail Receipt{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>

<div class="kt-container kt-grid__item kt-grid__item--fluid">
    <div class="kt-portlet kt-portlet--mobile">
        <div class="kt-portlet__head kt-portlet__head--lg">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">Detail Receipt</h3>
            </div>

            <div class="kt-portlet__head-toolbar">
                <div class="kt-portlet__head-wrapper">
                    <a href="{{ path(back_url) }}" class="btn btn-clean btn-icon-sm"><i class="la la-long-arrow-left"></i>Back</a>
                    <div class="btn-group">
						<button type="button" class="btn btn-brand btn-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Share</button>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">WhatsApp</a>
							<a class="dropdown-item" href="#">Email</a>
							<a class="dropdown-item" href="#">PDF</a>
							<a class="dropdown-item" href="#">Excel</a>
						</div>
					</div>
                </div>
            </div>

        </div>
        <div class="card">
            <div class="card-body">
                <div class="container mb-5 mt-3" style=" border: 1px solid black; padding: 33px;">
                    <div class="col-md-12" style="background:#189F9F;">
                        <div class="row">
                            <div class="col-sm-4" style="color:#fff;"><i class="far fa-hospital fa-4x ms-0"></i></div>
                            <div class="col-sm-6" style="color:#fff;  margin-top:10px;"><strong style="font-size: 20px;">Agrwal Hospital - {{ name }} Receipt</strong></div>
                        </div>
                    </div>

                    <div class="container">
                        <div class="row py-3">
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>MRD No.: </strong> </span>
                                        <span style="color:black !important;">125679</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong> Name: </strong> </span>
                                        <span style="color:black !important;">John Lorem</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Address: </strong></span>
                                        <span style="color:black !important;">2435 Bopal, Ahmedabad</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Date of visit: </strong></span>
                                        <span style="color:black !important;">Jun 23,2021</span>
                                    </li>

                                </ul>
                            </div>

                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>ABHA No.:</strong></span>
                                        <span style="color:black !important;">91-1254-1245-9874</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Age:</strong></span>
                                        <span style="color:black !important;">27</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Contact No:</strong></span>
                                        <span style="color:black !important;">123-456-789</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Discharge: </strong></span>
                                        <span style="color:black !important;">Jun 30,2021</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>M/F:</strong></span>
                                        <span style="color:black !important;">Male</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Email:</strong></span>
                                        <span style="color:black !important;"><i class="fas fa-email"></i>pt1@gmail.com</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Net Payment:</strong></span>
                                        <span style="color:black !important;"><i class="fas fa-email"></i>165650</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Unique ID:</strong></span>
                                        <span style="color:black !important;">QAD578V</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Treating Doctor:</strong></span>
                                        <span style="color:black !important;"><i class="fas fa-email"></i>Dr. Agrawal</span>
                                    </li>
                                    <li>
                                        <span style="color:black !important; font-weight: 400;"><strong>Mode of Payment:</strong></span>
                                        <span style="color:black !important;">Online</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="row my-2 mx-1 justify-content-center">
                            <table class="table table-striped table-borderless">
                                <thead style="background: #189F9F; font-size: 16px;"    class="text-white">
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Procedure</th>
                                        <th scope="col">No. of Procedure</th>
                                        <th scope="col">Charges</th>
                                        <th scope="col">GST</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Case</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i> 10,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 1,000</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">2</th>
                                        <td>Injection Charges</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i> 3,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 300</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Dressing Charges</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i> 1,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 100</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">4</th>
                                        <td>Cosumable Charges</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i> 800</td>
                                        <td><i class="fas fa-rupee-sign"></i> 80</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">5</th>
                                        <td>Total</td>
                                        <td>4</td>
                                        <td><i class="fas fa-rupee-sign"></i> 14,800</td>
                                        <td><i class="fas fa-rupee-sign"></i> 1,480</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="row">
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li style="color:black !important;"><strong>Advance Paid: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Opth. Net Expenditure: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Payble/Refundable: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Balance Amount: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li style="color:black !important;"><strong>Total Payment: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Insurance Claim: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Discount: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>GST: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li style="color:black !important;"><strong>Mode of payment: </strong></i> Online</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Insurance Compney: </strong>Company Name</li>
                                    <li style="color:black !important;" class="mt-2"><strong>After Discount: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li style="color:black !important;" class="mt-2"><strong>Total: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li style="color:black !important;" ><strong>Transuction ID: </strong></i> 6824AJH5669</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}