{% extends "pxy_dashboard/partials/base.html" %} 
{% load static %} 

{% block title %}Invoice{% endblock title %} 



{% block pagetitle %}
{% include "pxy_dashboard/partials/page-title.html" with pagetitle="Pages" title="Invoice" %}
{% endblock pagetitle %}

{% block content %} 
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <!-- Invoice Logo-->
                <div class="clearfix">
                    <div class="float-start mb-3">
                        <img src="{% static 'dashboard/images/logo-dark.png' %}" alt="dark logo" height="22">
                    </div>
                    <div class="float-end">
                        <h4 class="m-0 d-print-none">Invoice</h4>
                    </div>
                </div>

                <!-- Invoice Detail-->
                <div class="row">
                    <div class="col-sm-6">
                        <div class="float-end mt-3">
                            <p><b>Hello, Tosha Minner</b></p>
                            <p class="text-muted fs-13">Please find below a cost-breakdown for the recent work completed. Please make payment at your earliest convenience, and do not hesitate to contact me with any questions.</p>
                        </div>

                    </div><!-- end col -->
                    <div class="col-sm-4 offset-sm-2">
                        <div class="mt-3 float-sm-end">
                            <p class="fs-13"><strong>Order Date: </strong> &nbsp;&nbsp;&nbsp; Jan 17, 2023</p>
                            <p class="fs-13"><strong>Order Status: </strong> <span class="badge bg-success float-end">Paid</span></p>
                            <p class="fs-13"><strong>Order ID: </strong> <span class="float-end">#123456</span></p>
                        </div>
                    </div><!-- end col -->
                </div>
                <!-- end row -->

                <div class="row mt-4">
                    <div class="col-4">
                        <h6>Billing Address</h6>
                        <address>
                            Lynne K. Higby<br>
                            795 Folsom Ave, Suite 600<br>
                            San Francisco, CA 94107<br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                    </div> <!-- end col-->

                    <div class="col-4">
                        <h6>Shipping Address</h6>
                        <address>
                            Tosha Minner<br>
                            795 Folsom Ave, Suite 600<br>
                            San Francisco, CA 94107<br>
                            <abbr title="Phone">P:</abbr> (123) 456-7890
                        </address>
                    </div> <!-- end col-->

                    <div class="col-4">
                        <div class="text-sm-end">
                            <img src="{% static 'dashboard/images/barcode.png' %}" alt="barcode-image" class="img-fluid me-2" />
                        </div>
                    </div> <!-- end col-->
                </div>    
                <!-- end row -->        

                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-sm table-centered table-hover table-borderless mb-0 mt-3">
                                <thead class="border-top border-bottom bg-light-subtle border-light">
                                <tr><th>#</th>
                                    <th>Item</th>
                                    <th>Quantity</th>
                                    <th>Unit Cost</th>
                                    <th class="text-end">Total</th>
                                </tr></thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <b>Laptop</b> <br/>
                                        Brand Model VGN-TXN27N/B
                                        11.1" Notebook PC
                                    </td>
                                    <td>1</td>
                                    <td>$1799.00</td>
                                    <td class="text-end">$1799.00</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>
                                        <b>Warranty</b> <br/>
                                        Two Year Extended Warranty -
                                        Parts and Labor
                                    </td>
                                    <td>3</td>
                                    <td>$499.00</td>
                                    <td class="text-end">$1497.00</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>
                                        <b>LED</b> <br/>
                                        80cm (32) HD Ready LED TV
                                    </td>
                                    <td>2</td>
                                    <td>$412.00</td>
                                    <td class="text-end">$824.00</td>
                                </tr>

                                </tbody>
                            </table>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end col -->
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-sm-6">
                        <div class="clearfix pt-3">
                            <h6 class="text-muted">Notes:</h6>
                            <small>
                                All accounts are to be paid within 7 days from receipt of
                                invoice. To be paid by cheque or credit card or direct payment
                                online. If account is not paid within 7 days the credits details
                                supplied as confirmation of work undertaken will be charged the
                                agreed quoted fee noted above.
                            </small>
                        </div>
                    </div> <!-- end col -->
                    <div class="col-sm-6">
                        <div class="float-end mt-3 mt-sm-0">
                            <p><b>Sub-total:</b> <span class="float-end">$4120.00</span></p>
                            <p><b>VAT (12.5):</b> <span class="float-end">$515.00</span></p>
                            <h3>$4635.00 USD</h3>
                        </div>
                        <div class="clearfix"></div>
                    </div> <!-- end col -->
                </div>
                <!-- end row-->

                <div class="d-print-none mt-4">
                    <div class="text-end">
                        <a href="javascript:window.print()" class="btn btn-primary"><i class="ri-printer-line"></i> Print</a>
                        <a href="javascript: void(0);" class="btn btn-info">Submit</a>
                    </div>
                </div>   
                <!-- end buttons -->

            </div> <!-- end card-body-->
        </div> <!-- end card -->
    </div> <!-- end col-->
</div>


{% endblock content %} 

{% block extra_js %} 

 <!-- App js -->
 <script src="{% static 'dashboard/js/app.min.js' %}"></script>

{% endblock extra_js %}

