@extends('layouts.admin')
@section('title','LabPair Invoices & Receipts')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">Invoices & Receipts</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">

            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="javascript::void(0)">
                                    <span class="nav-text">Invoices & Receipts</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to manage and view all LabPair Invoices & Receipts.
                                    </p>
                                </div>


                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body">
                                        <!--begin: Datatable -->
                                        <div class="row">
                                            <div class="col-lg-12 custom-height-manage">
                                                <div class="bg-white adding-table w-100 h-100 th-white">
                                                    <div class="kt-portlet kt-portlet--mobile mb-0 h-100">
                                                        <div class="kt-portlet__body data-table-list p-0 h-100">
                                                            <table class="table">
                                                                <tr style="font-size:17px ;">
                                                                    <td colspan="3" scope="col" width="40%"></td>
                                                                    <td scope="col" width="15%"></td>
                                                                    <td colspan="2" scope="col" width="10%"> <input type="checkbox" class=" filter_invoice_receipt" style="width:17px; height:17px; margin-right:10px" id="invoice" checked value="invoice">Invoice <input type="checkbox" class=" filter_invoice_receipt" style="width:17px; height:17px;margin-right:10px;margin-left:10px" id="receipt" checked value="receipt">Reciept </td>


                                                                </tr>
                                                                <tr>
                                                                    <td scope="col" width="10%">
                                                                        <input type="text" class="form-control" placeholder="Invoice Date" name="name" autocomplete="off" id="SearchInvoiceDate">
                                                                    </td>
                                                                    <td colspan="2" scope="col" width="40%"><input type="text" class="form-control filter_invoice_receipt" placeholder="Company" id="search_company"></td>
                                                                    <td scope="col" width="15%"><input type="text" class="form-control filter_invoice_receipt" placeholder="Name" id="search_name"></td>
                                                                    <td scope="col" width="15%"><input type="text" class="form-control filter_invoice_receipt" placeholder="Transaction Number" id="search_transaction_number"></td>
                                                                    <td scope="col" width="10%"></td>
                                                                    <td scope="col" width="10%"></td>


                                                                </tr>

                                                                </tbody>
                                                            </table>
                                                            <table class="table table-striped" id="dataTableList">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col" width="10%">Date</th>
                                                                        <th scope="col" width="40%">Company</th>
                                                                        <th scope="col" width="15%">Name</th>
                                                                        <th scope="col" width="15%">Transaction Number</th>
                                                                        <th scope="col" width="10%">$ Amount</th>
                                                                        <th scope="col" width="10%">Private Note</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Datatable -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showInvoice" data-backdrop="false">
    <div class="modal-dialog modal-xl ">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: 2px solid #888888 !important">
                <table style="margin:0 auto;width:100%; background-color:#f5f5f5;" role="presentation">
                    <tbody>
                        <tr>
                            <td>
                                <h2 style="margin: 0 0 10px 0; padding: 0; font-size: 40px; line-height: 50px;color: #000;">Invoice</h2>
                                <p style="font-weight: 500; color: #888888;">Transaction Number: -<span id="invoice_modal_transaction_number"></span></p>
                            </td>
                            <td style="text-align:right;">
                                <img src="{{asset('assets/media/logos/labpair-logo.png')}}" style="height: 50%;width: 50%;">
                                <p style="font-weight: 500; color: #888888;">Contact Us: <a href="mailto:info@labpair.com" style="font-weight: 500; color: #888888; text-decoration: none;">info@labpair.com</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>

            </div>
            <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                <div class="row">
                    <div class="col-md-12">
                    </div>
                </div>
                <p class="mt-3 invoice">Invoice Date: <span><b id="invoice_modal_invoice_date"></b></span> </p>
                <div class="bill-wrapper mb-3">
                    <p>Bill to:</p>
                    <p id="invoice_modal_company_name"></p>
                    <p id="invoice_modal_address" class="address"></p>
                    <p id="invoice_modal_email"></p>
                    <p class="p-invoice"><span class="text-decoration-underline">Invoice note:</span> <span id="invoice_modal_invoice_note"> </span></p>
                </div>
                <div class="terms-table mb-3 table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width:35%;">Term</th>
                                <th style="width:50%;">Product</th>
                                <th style="width:15%;">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td id="invoice_modal_term"> <span id="invoice_modal_days"></span> days<span class="comment d-block" id="invoice_modal_start_date_end_date"></span></td>
                                <td id="invoice_modal_product"></td>
                                <td id="invoice_modal_amount"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="total-table-wrap mb-5 position-relative table-responsive">
                    <table class="table mb-0 position-relative">
                        <thead>
                            <tr>
                                <th>Subtotal</th>
                                <th id="invoice_modal_sub_total"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Taxes</td>
                                <td id="invoice_modal_taxes"></td>
                            </tr>
                            <tr>
                                <td>Fees</td>
                                <td id="invoice_modal_fees"></td>
                            </tr>
                            <tr>
                                <td>Total (USD)</td>
                                <td id="invoice_modal_total"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="row mb-2">
                    <div class="col-md-12">
                        <a href="#" title="Terms of Service" class="terms text-decoration-underline">Terms of Service</a>
                    </div>
                </div>

                <div class="row" style="margin-bottom: 24px;">

                    <div class="button-left col-sm-8 col-md-6 col-lg-4">
                        <a href="javascript:void(0)" class="primary-btn disabled mb-2 download-pdf">Download PDF</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="showReceipt" data-backdrop="false">
    <div class="modal-dialog modal-xl ">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: 2px solid #888888 !important">
                <table style="margin:0 auto;width:100%; background-color:#f5f5f5;" role="presentation">
                    <tbody>
                        <tr>
                            <td>
                                <h2 style="margin: 0 0 10px 0; padding: 0; font-size: 40px; line-height: 50px;color: #000;">Receipt</h2>
                                <p style="font-weight: 500; color: #888888;">Transaction Number: -<span id="receipt_modal_transaction_number"> 533 071</span></p>
                            </td>
                            <td style="text-align:right;">
                                <img src="{{asset('assets/media/logos/labpair-logo.png')}}" style="height: 50%;width: 50%;">
                                <p style="font-weight: 500; color: #888888;">Contact Us: <a href="mailto:info@labpair.com" style="font-weight: 500; color: #888888; text-decoration: none;">info@labpair.com</a></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                <div class="kt-section__body">
                    <div class="row">
                        <div class="col-md-12">
                        </div>
                    </div>
                    <p class="mt-3 invoice">Payment Made Date: <span> <b id="receipt_modal_payment_date"></b> </span> </p>
                    <div class="bill-wrapper mb-3">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sn-12 col-12">
                                <p>Bill to:</p>
                                <p id="receipt_modal_company_name"></p>
                                <p class="address" id="receipt_modal_address"></p>
                                <p id="receipt_modal_email"></p>
                                <p class="p-invoice"><span class="text-decoration-underline">Invoice note:</span> <span id="receipt_modal_note"></span></p>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sn-12 col-12">
                                <div class="credit-table-wrap table-responsive">
                                    <table class="table">

                                        <tbody>
                                            <tr>
                                                <td id="receipt_modal_payment_lable">Credit Card</td>
                                                <td id="receipt_modal_credit_card_amount"></td>
                                            </tr>
                                            <tr>
                                                <td>Previous Balance</td>
                                                <td id="receipt_modal_previous_balance"></td>
                                            </tr>
                                            <tr>
                                                <td>Received Payment</td>
                                                <td id="receipt_modal_received_payment"></td>
                                            </tr>
                                            <tr>
                                                <td>Balance Due (USD)</td>
                                                <td id="receipt_modal_balance_due">$ 0.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="terms-table mb-3 table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th style="width:35%;">Term</th>
                                    <th style="width:50%;">Product</th>
                                    <th style="width:15%;">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td id="invoice_modal_term"> <span id="receipt_modal_days"></span> days<span class="comment d-block" id="receipt_modal_start_date_end_date"></span></td>
                                    <td id="receipt_modal_product"></td>
                                    <td id="receipt_modal_amount"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="total-table-wrap mb-5 position-relative table-responsive">
                        <table class="table mb-0 position-relative">
                            <thead>
                                <tr>
                                    <th>Subtotal</th>
                                    <th id="receipt_modal_sub_total"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Taxes</td>
                                    <td id="receipt_modal_taxes"></td>
                                </tr>
                                <tr>
                                    <td>Fees</td>
                                    <td id="receipt_modal_fees"></td>
                                </tr>
                                <tr>
                                    <td>Total (USD)</td>
                                    <td id="receipt_modal_total"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <a href="javascript:void(0)" title="Terms of Service" class="terms text-decoration-underline">Terms of Service</a>
                        </div>
                    </div>

                    <div class="row" style="margin-bottom: 24px;">

                        <div class="button-left col-sm-8 col-md-6 col-lg-4">
                            <a href="javascript:void(0)" class="primary-btn disabled mb-2 download-pdf">Download PDF</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page_level_js')
<script src="{{asset('assets/js/admin/invoice-receipt.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>
    $(document).on("blur", '#addEditForm .inputModule', function() {
        checkRequired(ex);
    });
    $(document).on("change", '#addEditForm select.inputModule', function() {
        checkRequired(ex);
    });
    checkRequired(ex);
</script>
@endpush