@extends('user_layout')
@section('content')
<style>
.select2-selection--single{
    height: 40px !important;
}
</style>
<div class="modal" id="invoice_payments_ach" data-keyboard="false" data-backdrop="static" role="dialog"> </div>
<div class="modal" id="add_achinfo_ps" data-keyboard="false" data-backdrop="static" role="dialog"> </div>

<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="content-header">
</div>
<!-- /.content-header -->

<section class="content">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-10">
                            <h3>List Invoices</h3>
                        </div>
                        <div class="col-md-12 float-right text-right" style="margin-bottom: 10px;">
                            <a id="create_invoice_btn" href="javascript:void(0)" data-toggle="modal" data-target="#create_invoice" class="btn btn-sm btn-info">New</a>
                            @if (auth()->user()->role == 1)
                            <button class="btn btn-sm btn-danger" id="delete-invoice">Delete</button>
                            @endIf
                            @if (auth()->user()->role == 1)
                            <a href="javascript:void(0)" data-toggle="modal" data-target="#minvoice_payments" class="btn btn-sm btn-info">Record
                                Payment</a>
                            @endIf
                            <button class="btn btn-sm btn-info" id="export-quick-book"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp;Export to QBO</button>

                        </div>
                    </div>
                </div>

                <!-- /.card-header -->
                <div class="card-body">
                    <table id="invoicesGrid" class="table table-bordered table-hover" style="width:100%;">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all" name="select-all"></th>
                                <th>Date</th>
                                <th>Number</th>
                                <th>Customer</th>
                                <!-- <th>Status</th> -->
                                <th>Amount Due</th>
                                <th>Paid</th>
                                <th>Balance</th>
                                <th>Exported to QB</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th>Date</th>
                                <th>Number</th>
                                <th>Customer</th>
                                <!-- <th>Status</th> -->
                                <th>Amount Due</th>
                                <th>Paid</th>
                                <th>Balance</th>
                                <th>Exported to QB</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->


        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->

    <div class="modal" id="invoice_payments" style="">
    </div>

    <div class="modal" id="invoice_payments_history" style="z-index: 1100;">
    </div>

    
    <div class="modal" id="invoice_email" data-keyboard="false" data-backdrop="static" role="dialog">
    </div>

    <div class="modal" id="minvoice_payments" style="">
    </div>

    <div class="modal" id="view_invoice" style="z-index: 1060;">
        <form id="invoice_formupdate" name="invoice_form" method="post">
            <div class="modal-dialog modal-xl ui-draggable ui-draggable-handle">
                <div class="modal-content">

                    <div class="modal-header">
                        <h4 class="modal-title">View Invoice</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>&nbsp;</h4>
                                <div class="form-group row">
                                    <div class="col-md-3"> <label for="name">Bill To: </label></div>
                                    <div class="col-md-9">
                                        <input type="text" id="merchandid_view" readonly>
                                    </div>
                                </div>
                                <div class="form-group" style="display:none">
                                    <label for="name">Address</label>
                                    <textarea readonly class="form-control" name="address" id="address_view"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <h4>&nbsp;</h4>
                              

                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="name">Invoice Number: </label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" value="#10{{ $invoiceid }}" class="form-control" readonly id="iid_view">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="name">Invoice Date: </label>
                            </div>
                            <div class="col-md-6" style="position: relative;">
                                <input type="text" class="form-control" name="invoicedate" id="invoicedate_view" readonly style="padding-left: 25px;">
                                <i class="fa fa-calendar" aria-hidden="true" style="position:absolute;z-index: 1px;top: 11px;margin-left: 5px;"></i>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="name">Payment Due: </label>
                            </div>
                            <div class="col-md-6" style="position: relative;">
                                <input type="text" class="form-control" name="duedate" id="duedate_view" readonly style="padding-left: 25px;">

                                <i class="fa fa-calendar" aria-hidden="true" style="position:absolute;z-index: 1px;top: 11px;margin-left: 5px;"></i>
                            </div>
                        </div>

                    </div>

                    <div class="col-md-12 invoiceitems_view">
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <style type="text/css">
                            .trclass {
                                position: relative;
                            }

                            .tdclass {
                                position: absolute;
                                left: 70px;
                            }
                        </style>

                        <table style="float:right;margin-right: 0px;width:150px;">
                            <tr class='trclass' style="display:none">
                                <td>Subtotal: </td>
                                <td id="subtotal_view" class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass' style="display:none">
                                <td>Tax: </td>
                                <td class="tdclass" id="tax">0.00</td>
                            </tr>
                            <tr class='trclass'>
                                <td>Total: </td>
                                <td id="ftotal_view" class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass'>
                                <td>Payment: </td>
                                <td id="payment_view" class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass'>
                                <td>Balance: </td>
                                <td id="balance_view" class="tdclass">0.00</td>
                            </tr>
                        </table>

                    </div>

                </div>

            </div>

            <div class="modal-footer d-flex justify-content-between w-100">
    <div>
        <input type="hidden" id="edit_inv_id">
        <button type="button" class="btn btn-default" id="close_view_invoice_btn" data-dismiss="modal">Close</button>
        @if (auth()->user()->role == 1)
        <a id="invoice_history_btn" href="javascript:void(0)" data-toggle="modal" data-target="#invoice_history" data-dismiss="modal" class="btn btn-default" style="display:none;">Edit History</a>
        @endif
    </div>
    <div>
        

        <button 
    type="button"
    data-id="{{ $invoiceid }}" 
    data-toggle="modal" 
    data-balance="" 
    data-target="#invoice_payments_history" 
    class="btn btn-primary">
    Payments
</button>
        <button class="btn btn-primary" type="button" id="updateinvoice">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;Save
        </button>
        <a class="btn btn-primary" id="printInvoiceBtn" target="_blank" href="invoices/invoicedetail/{{ $invoiceid }}">Print</a>
    </div>
</div>

    </div>
    </div>
    </form>
    </div>

    <div class="modal" id="invoice_history">
        <div class="modal-dialog modal-lg ui-draggable ui-draggable-handle">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Invoice History</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <h5>Showing History of Invoice: #10<span id="invoice_id_history"></span></h5>
                    </div>
                    <div class="invoice_history_table">
                        <table class="table table-bordered table-hover" style="width:100%;">
                            <thead>
                                <tr>
                                    <th>Column</th>
                                    <th>New Value</th>
                                    <th>Old Value</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody id="invoiceHistoryBody">
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="create_invoice">
        <form id="invoice_form" name="invoice_form" method="post">
            <input type="hidden" name="promoinvoice" id="promoinvoice" value>
            <div class="modal-dialog modal-xl ui-draggable ui-draggable-handle">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Create Invoice</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <div class="col-md-6">
                                <h4>&nbsp;</h4>
                                <div class="form-group row">
                                    <div class="col-md-3"> <label for="name">Bill To: </label></div>
                                    <div class="col-md-9">
                                    <div class="d-flex align-items-center">

                                    <select class="form-control me-2" name="merchandid" id="merchandid" style="flex: 1;">
                                    <option value="">Select Customer</option>
            @if (!empty($customers))
                @foreach ($customers as $qb_id=>$customer)
                    <option value="{{$qb_id}}" alt="1">
                        {{ $customer }}
                    </option>
                @endforeach
            @endif
        </select>&nbsp;&nbsp;
        <a href="javascript:void(0)" class="btn btn-primary" id="sync-invoice-customers"><i class="fas fa-sync-alt me-1"></i>&nbsp;Sync</a>

                        </div>

                                    </div>
                                </div>

                                <div class="form-group" style="display:none">
                                    <label for="name">Address</label>
                                    <textarea readonly class="form-control" name="address" id="address"></textarea>
                                </div>

                                <div class="form-group row">
                            <div class="col-md-3">
                                <label for="name">Invoice Date: </label>
                            </div>
                            <div class="col-md-6" style="position: relative;">
                                <input type="text" class="form-control" name="invoicedate" id="invoicedate" readonly style="padding-left: 25px;">
                                <i class="fa fa-calendar" aria-hidden="true" style="position:absolute;z-index: 1px;top: 11px;margin-left: 5px;"></i>
                            </div>
                        </div>

                            </div>

                            <div class="col-md-6">

                                <h4>&nbsp;</h4>
                                
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="name">Invoice Number: </label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" value="{{ $invoiceid }}" class="form-control" id="iid">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="name">Payment Due: </label>
                            </div>
                            <div class="col-md-6" style="position: relative;">
                                <input type="text" class="form-control" name="duedate" id="duedate" readonly style="padding-left: 25px;">
                                <i class="fa fa-calendar" aria-hidden="true" style="position:absolute;z-index: 1px;top: 11px;margin-left: 5px;"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 invoiceitems">
                        <div class="col-md-12 d-flex  align-items-center justify-content-between border-bottom py-2">

                            <h4 class="m-0 pt-2">Items</h4>
                            <span id="fromqty">&nbsp;</span> <a class="addinvitem btn btn-primary" href="javascript:void(0)">Add item</a>
                        </div>

                        <div class="itemdetail pt-3">
                            <div class="form-group row selectionDiv">
                                <div class="col-sm-3">
                                    <span id="fromqty">Item</span>
                                    <select name="inv_items[]" class="form-control inv_items" id="inv_items">
                                        <option>Select Item</option>
                                        @foreach ($inv_items as $inv_item)
                                        <option value="{{ $inv_item->id }}" class="invItemOption" data-type="{{ $inv_item->type }}" data-qty="{{ $inv_item->quantity }}" data-price="{{ $inv_item->price }}" data-description="{{ $inv_item->item }}" data-prices="{{ json_encode($inv_item->prices) }}" show_start_date="{{ $inv_item->is_show_start_date_calendar }}" show_end_date="{{ $inv_item->is_show_end_date_calendar }}" required_start_date="{{ $inv_item->is_require_start_date_calendar }}" required_end_date="{{ $inv_item->is_require_end_date_calendar }}">
                                            {{ $inv_item->item }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-sm-4 descDiv">
                                    <span id="fromqty">Description1</span> <textarea type="text" name="invdescription[]" class="form-control invdescription" id="invdescription"></textarea>
                                </div>

                                <div class="col-sm-1 qtyDiv">
                                    <span id="fromqty">Qty</span> <input type="text" name="invqty[]" value="" class="form-control invqty" id="invqty">
                                </div>


                                <div class="col-sm-1 rateDiv">
                                    <span id="fromqty">Price</span> <input type="text" name="invrate[]" value="" class="form-control invrate" id="invrate">
                                </div>

                                <div class="col-sm-2 totalAmountDiv">
                                    <span id="fromqty">Amount</span> <input type="text" name="totAmount[]" value="" class="form-control totAmount" id="totAmount" readonly>
                                </div>



                            </div>

                        </div>
                        


                    </div>

                </div>
                <div class="row">

                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <style type="text/css">
                            .trclass {
                                position: relative;
                            }

                            .tdclass {
                                position: absolute;
                                left: 70px;
                            }
                        </style>

                        <table style="float:right;margin-right: 0px;width:150px;">
                            <tr class='trclass' style="display:none">
                                <td>Subtotal1: </td>
                                <td id="subtotal" class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass' style="display:none">
                                <td>Tax: </td>
                                <td class="tdclass" id="tax">0.00</td>
                            </tr>
                            <tr class='trclass'>
                                <td>Total: </td>
                                <td id="ftotal" class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass' style="display:none">
                                <td>Payment: </td>
                                <td class="tdclass">0.00</td>
                            </tr>
                            <tr class='trclass' style="display:none">
                                <td>Balance: </td>
                                <td class="tdclass">0.00</td>
                            </tr>
                        </table>

                    </div>

                    {{-- <div class="col-sm-10" style="text-align: right;">
                                    <span class="subtitle">Subtotal:</span> <span id="subtotal">0.00</span>
                                </div>

                                <div class="col-sm-10" style="text-align: right;">
                                    <span class="subtitle">Tax:</span> 0.00
                                </div>

                                <div class="col-sm-10" style="text-align: right;">
                                    <span class="subtitle">Total:</span> <span id="ftotal">0.00</span>
                                </div>

                                <div class="col-sm-10" style="text-align: right;">
                                    <span class="subtitle">Payment</span>: 0.00
                                </div>

                                <div class="col-sm-10" style="text-align: right;">
                                    <span class="subtitle">Balance:</span> 0.00
                                </div> --}}
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary col-md-3" type="button" id="saveinvoice"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;Save</button>
                </div>
            </div>
    </div>
    </div>
    </form>
    </div>
</section>
<style type="text/css">
    .ui-autocomplete {
        position: absolute;
        z-index: 9999 !important;
        top: 0;
        left: 0;
        cursor: default;
        background-color: #fff;
        padding: 3px;
        border: 1px solid #ccc
    }

    .ui-autocomplete>li.ui-state-focus {
        background-color: #FF6C00;
    }
</style>
<!-- /.content -->
<!-- Script Files -->
@include('layouts.scripts')
<!-- End Scripts -->
<script>
    function get_invoice_log(invoiceId) {
        $.ajax({
            type: 'GET',
            url: '