{% extends 'super_admin_templates/base.html' %}
{% set path = "master_configuration" %}
{% set subpath = "bank" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
  
  .pagination-page-info {
    padding: .6em;
    padding-left: 0;
    width: 40em;
    margin: .5em;
    margin-left: 0;
    font-size: 12px;
}
.pagination-page-info b {
    color: black;
    background: #6aa6ed;
    padding-left: 2px;
    padding: .1em .25em;
    font-size: 150%;
}
</style>

<!-- Start::app-content -->
<div class="main-content app-content d-flex align-items-center" id="printableDiv">
    <div class="container-fluid">
        <!-- Start::row-1 -->
        <div class="row justify-content-center">
            <div class="col-xl-9">
                <div class="card custom-card">
                    <div class="card-header d-md-flex d-block">
                        <!-- <div class="h5 mb-0 d-sm-flex d-bllock align-items-center">
                                    <div class="avatar avatar-sm">
                                        <img style="width:100px" src="../assets/viyonalogo.png" alt="">
                                    </div>
                                </div>
                                <div class="ms-auto mt-md-0 mt-2">
                                    <div class="h6 fw-semibold mb-0"> INV: <span class="text-primary">#1130-24512</span></div>
                                </div> -->
                        <div class="col-xl-12">
                            <div class="row">
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
                                    <div class="avatar avatar-sm" style="width:100%; max-width: 30%; height: auto; ">
                                        <td>
                                            <img src="{{payinDict.companyLogo }}" alt="Company Logo" width="100"
                                                height="100">
                                        </td>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                    <div class="h6 fw-semibold mb-0" style="text-align: right;"> INV: <span
                                            class="text-primary">#{{payinDict.orderId}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row gy-3">
                            <div class="col-xl-12">
                                <div class="row">
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
                                        <p class="text-muted mb-2">
                                            Billing From :
                                        </p>
                                        <p class="fw-bold mb-1">
                                            {{payinDict.companyAddress}}
                                        </p>
                                        <p class="mb-1 text-muted">
                                            {{payinDict.email}}
                                        </p>
                                        <p class="mb-1 text-muted">
                                            {{payinDict.mobileNumber}}
                                        </p>
                                    </div>
                                    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 ms-auto mt-sm-0 mt-3">
                                        <p class="text-muted mb-2">
                                            Billing To :
                                        </p>
                                        <p class="fw-bold mb-1">
                                            {{payinDict.customerEmail}}
                                        </p>
                                        <p class="text-muted mb-1">
                                            {{payinDict.customerName}}
                                        </p>

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                                    <p class="fw-semibold text-muted mb-1">Issued Date :</p>
                                    <p class="fs-15 mb-1">{{payinDict.created_on_date}}</p>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                                    <p class="fw-semibold text-muted mb-1">Due Date :</p>
                                    <p class="fs-15 mb-1">{{payinDict.dueDate}}</p>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3">
                                    <p class="fw-semibold text-muted mb-1">Due Amount :</p>
                                    <p class="fs-16 mb-1 fw-semibold">₹{{payinDict.amount}}</p>
                                </div>
                            </div>
                            <div class="col-xl-12">
                                <div class="table-responsive">
                                    <table class="table nowrap text-nowrap border mt-4">
                                        <thead>
                                            <tr>
                                                <th>DESCRIPTION</th>
                                                <th>QUANTITY</th>
                                                <th>PRICE PER UNIT</th>
                                                <th>TOTAL</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div class="text-primary">
                                                        {{payinDict.productName}}
                                                    </div>
                                                    <!-- <div class="text-muted">
                                                               Full Stack Developer(Python,Html,Css,Js,Nosql)<br> 
                                                               + UI/UX Design
                                                            </div> -->
                                                </td>
                                                <td class="product-quantity-container">
                                                    1
                                                </td>
                                                <td>
                                                    ₹{{payinDict.grandTotal}}
                                                </td>
                                                <td>
                                                    ₹{{payinDict.grandTotal}}
                                                </td>
                                            </tr>

                                            <tr>
                                                <td colspan="2"></td>
                                                <td colspan="2">
                                                    <table class="table table-sm text-nowrap mb-0 table-borderless">
                                                        <tbody>
                                                            <tr>
                                                                <th scope="row">
                                                                    <p class="mb-0">Sub Total :</p>
                                                                </th>
                                                                <td>
                                                                    <p class="mb-0 fw-semibold fs-15">
                                                                        ₹{{payinDict.grandTotal}}</p>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">
                                                                    <p class="mb-0">Charges</p>
                                                                </th>
                                                              
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">
                                                                    <p class="mb-0">GST <span
                                                                            class="text-danger">(18%)</span> :</p>
                                                                </th>
                                                                <td>
                                                                    <p class="mb-0 fw-semibold fs-15">
                                                                        ₹{{payinDict.gstAmount}}</p>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">
                                                                    <p class="mb-0">Due Till Date :</p>
                                                                </th>
                                                                <td>
                                                                    <p class="mb-0 fw-semibold fs-15">₹0.00</p>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <th scope="row">
                                                                    <p class="mb-0 fs-14">Total :</p>
                                                                </th>
                                                                <td>
                                                                    <p class="mb-0 fw-semibold fs-16 text-success">
                                                                        ₹{{payinDict.amount}}</p>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="col-xl-3">
                        <div class="card custom-card">
                            <div class="card-header">
                                <div class="card-title">
                                    Mode Of Payment
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row gy-3">
                                    <div class="col-xl-12">
                                        <p class="fs-14 fw-semibold">
                                            Credit/Debit Card
                                        </p>
                                        <p>
                                            <span class="fw-semibold text-muted fs-12">Name On Card :</span> Json Taylor
                                        </p>
                                        <p>
                                            <span class="fw-semibold text-muted fs-12">Card Number :</span> 1234 5678 9087 XXXX
                                        </p>
                                        <p>
                                            <span class="fw-semibold text-muted fs-12">Total Amount :</span> <span class="text-success fw-semibold fs-14">$2570.42</span>
                                        </p>
                                        <p>
                                            <span class="fw-semibold text-muted fs-12">Due Date :</span> 29,Dec 2022 - <span class="text-danger fs-12 fw-semibold">30 days due</span>
                                        </p>
                                        <p>
                                            <span class="fw-semibold text-muted fs-12">Invoice Status : <span class="badge bg-warning-transparent">Pending</span></span>
                                        </p>
                                        <div class="alert alert-success" role="alert">
                                            Please Make sure to pay the invoice bill within 30 days.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->
<div class="row justify-content-center mb-3">
    <button class="btn btn-sm btn-secondary me-1 w-auto" onclick="printDiv('printableDiv')">Print<i
            class="ri-printer-line ms-1 align-middle d-inline-block"></i></button>
</div>
<script>
    function printDiv(divId) {
        var printContents = document.getElementById(divId).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
    }
</script>
</body>
<!-- End::app-content -->


{% endblock %}