{% 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(url_back) }}" class="btn btn-clean btn-icon-sm"><i class="la la-long-arrow-left"></i>Back</a>
                    <a href="{{ path('detail_recept_download') }}"class="btn btn-clean text-capitalize border-0" data-mdb-ripple-color="dark"><i class="fas fa-print text-primary"></i> Print</a>
                    <a href="#" class="btn btn-clean text-capitalize" data-mdb-ripple-color="dark"><i class="far fa-file-pdf text-danger"></i>Export</a>
                </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-5" 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</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:#53585b; font-weight: 400;"><strong>MRD No.: </strong> </span>
                                        <span>125679</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong> Name: </strong> </span>
                                        <span>John Lorem</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Address: </strong></span>
                                        <span >2435 Sweetwater, National City, California.</span>
                                    </li>
                                    <li>
                                        <span class="fw-bold">
                                            <span style="color:#53585b; font-weight: 400;"><strong>Date Of visit: </strong></span>
                                        </span >Jun 23,2021
                                    </li>

                                </ul>
                            </div>

                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>ABHA:</strong></span>
                                        <span>91-1254-1245-9874</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Age:</strong></span>
                                        <span>27</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Contact No:</strong></span>
                                        <span>123-456-789</span>
                                    </li>
                                    <li>
                                        <span class="fw-bold">
                                            <span style="color:#53585b; font-weight: 400;"><strong>Discharge: </strong></span>
                                        </span >Jun 23,2021
                                    </li>
                                </ul>
                            </div>

                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>M/F:</strong></span>
                                        <span>Male</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Email:</strong></span>
                                        <span><i class="fas fa-email"></i>pt1@gmail.com</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Net Payment:</strong></span>
                                        <span><i class="fas fa-email"></i>0</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-sm-3">
                                <ul class="list-unstyled">
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Unique ID:</strong></span>
                                        <span>Male</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Treating Doctor:</strong></span>
                                        <span><i class="fas fa-email"></i>Doctor Agrawal</span>
                                    </li>
                                    <li>
                                        <span style="color:#53585b; font-weight: 400;"><strong>Cash/card/Gpay/Net banking:</strong></span>
                                        <span>Net banking</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">Item</th>
                                        <th scope="col">No. Particulars</th>
                                        <th scope="col">Charges</th>
                                        <th scope="col">GST</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>Break fast</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>Tea</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>Juice</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>Lunch</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><strong>Advance Paid: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li class="mt-2"><strong>Net Expenditure: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li class="mt-2"><strong>Payble/Refundable: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li 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><strong>Total Payment: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li class="mt-2"><strong>Insurance Claim: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li class="mt-2"><strong>Discount: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li 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><strong>Mode of payment: </strong></i> Online</li>
                                    <li class="mt-2"><strong>Insurance Compney: </strong>Company Name</li>
                                    <li class="mt-2"><strong>After Discount: </strong><i class="fas fa-rupee-sign"></i> 0</li>
                                    <li 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><strong>Transuction ID: </strong></i> 6824AJH5669</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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