{% 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">Procedure</th>
                                        <th scope="col">No. of Procedures</th>
                                        <th scope="col">Charges</th>
                                        <th scope="col">GST</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row">1</th>
                                        <td>OPD Charges</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i> 2,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 250</td>
                                    </tr>
                                                                        <tr>
                                        <th scope="row">2</th>
                                        <td>Admission Charges</td>
                                        <td>5</td>
                                        <td><i class="fas fa-rupee-sign"></i> 5,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 550</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">3</th>
                                        <td>Lab Charges</td>
                                        <td>3</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">4</th>
                                        <td>Radiology Charges</td>
                                        <td>4</td>
                                        <td><i class="fas fa-rupee-sign"></i> 4,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 450</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">5</th>
                                        <td>Blood Charges</td>
                                        <td>7</td>
                                        <td><i class="fas fa-rupee-sign"></i> 7,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 750</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">6</th>
                                        <td>food Charges</td>
                                        <td>9</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">7</th>
                                        <td>Laundry Charges</td>
                                        <td>2</td>
                                        <td><i class="fas fa-rupee-sign"></i> 5,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 500</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">8</th>
                                        <td>Pharmacy Charges</td>
                                        <td>6</td>
                                        <td><i class="fas fa-rupee-sign"></i> 7,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 700</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">9</th>
                                        <td>Ward Charges</td>
                                        <td>4</td>
                                        <td><i class="fas fa-rupee-sign"></i> 11,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 1,100</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">10</th>
                                        <td>OT Charges</td>
                                        <td>1</td>
                                        <td><i class="fas fa-rupee-sign"></i>2,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 200</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">11</th>
                                        <td>Anaesthesia Charges</td>
                                        <td>6</td>
                                        <td><i class="fas fa-rupee-sign"></i> 8,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 850</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">12</th>
                                        <td>Delivery Charges</td>
                                        <td>3</td>
                                        <td><i class="fas fa-rupee-sign"></i> 5,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 550</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">13</th>
                                        <td>Other service Charges</td>
                                        <td>7</td>
                                        <td><i class="fas fa-rupee-sign"></i> 9,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 900</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">14</th>
                                        <td>Surgery Charges</td>
                                        <td>6</td>
                                        <td><i class="fas fa-rupee-sign"></i> 6,500</td>
                                        <td><i class="fas fa-rupee-sign"></i> 600</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">15</th>
                                        <td>Total</td>
                                        <td>64</td>
                                        <td><i class="fas fa-rupee-sign"></i> 86,000</td>
                                        <td><i class="fas fa-rupee-sign"></i> 8,000</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 %}