<div class="modal fade" tabindex="-1" role="dialog" id="modal_edit_invoice" style="width: 100%;">
	<div class="modal-dialog" role="document" style="width: 100%; height: 106% !important; margin: 0;">
		<div class="modal-content" style="width: 100%; height: 100%;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">@lang('lang_v1.invoice_edit')</h4>
			</div>
			<div class="modal-body">
				<div class="row">
                    <div class="col-sm-12" style="font-size: 27px;">
                        <i class="fa fa-clock"></i> Invoice # <span id="invoice_no"></span>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Customer <i class="fa fa-question-circle"></i></label>
                            <select name="customer_invoice" id="customer_invoice" class="form-control select2" style="width: 100%">
                                <option value="">Barneet Design</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Customer email <i class="fa fa-question-circle"></i></label>
                            <input type="text" name="customer_email_invoice" id="customer_email_invoice" class="form-control" value="email@gmail.com">
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form group pull-right">
                            <label for="" style="font-size: 16px;" class="pull-right" id="balance_status">BALANCE DUE</label>
                            <br>
                            <span id="balance_due_invoice" name="balance_due_invoice" style="font-size: 30px;">$274.50</span>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="">Billing Address</label>
                            <textarea name="billing_address_invoice" id="billing_address_invoice" cols="10" rows="2" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="">Terms <i class="fa fa-question-circle"></i></label>
                            <select name="terms_invoice" id="terms_invoice" class="form-control select2"></select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="">Invoice Date</label>
                            <input class="form-control dob-date-picker" readonly="" name="invoice_date" type="text" id="invoice_date">
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <label for="">Invoice Due Date</label>
                            <input class="form-control dob-date-picker" readonly="" name="invoice_due_date" type="text" id="invoice_due_date">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 5%;">#</th>
                                    <th style="width: 30%;">Product/Service <i class="fa fa-question-circle"></i></th>
                                    <th style="width: 30%;">Description</th>
                                    <th style="width: 10%;">Qty</th>
                                    <th style="width: 10%;">Rate</th>
                                    <th style="width: 5%;">Amount</th>
                                    <th style="width: 5%;">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody id="product_service"></tbody>
                            <tfoot>
                                <tr style="text-align: right">
                                    <td colspan="6">Subtotal</td>
                                    <td id="span_subtotal" style="font-size: 15px;"></td>
                                </tr>
                                <tr>
                                    <td colspan="5">Message on Invoice</td>
                                    <td style="text-align: right;">
                                        {{-- Taxable Subtotal <span id="tax_subtotal"></span> --}}
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4"><textarea name="customer_memo" id="customer_memo" cols="50" rows="3"></textarea></td>
                                    <td colspan="2">
                                        <select name="tax_rate_invoice" id="tax_rate_invoice" class="form-control" placeholder="Select a sales tax rate" style="width: 80% !important;" onchange="get_rate_data(this)"></select> <span id="tax_rate" style="font-size: 20px; font-weight: 600;"></span>
                                    </td>
                                    <td><input type="text" name="tax_amount" id="tax_amount" class="form-control"></td>
                                </tr>
                                <tr>
                                    <td colspan="4">Message on statement <br><textarea name="private_note" id="private_note" cols="50" rows="3"></textarea></td>
                                    <td><select name="discount_type" id="discount_type" placeholder="Discount Percent" class="form-control" onchange="get_discount();">
                                        <option value="value">Discount Value</option>    
                                        <option value="percent">Discount Percent</option>    
                                    </select></td>
                                    <td><input type="text" name="percent_amount" id="percent_amount" class="form-control" value="0" onchange="get_discount();"></td>
                                    <td style="text-align: right;font-size: 15px;"><span id="total_discount">0</span></td>
                                </tr>
                                <tr style="text-align: right; font-size: 15px;">                                    
                                    <td colspan="6">Total</td>
                                    <td><span id="total_amt" style="font-size: 15px;"></span>
                                        <input type="hidden" name="total_amt_old" id="total_amt_old">
                                    </td>
                                </tr>
                                <tr style="text-align: right; font-size: 15px;" id="amount_received_tr">                                    
                                    <td colspan="6">Amount Received</td>
                                    <td><span id="amount_received" style="font-size: 15px;">0</span></td>
                                </tr>
                                <tr style="text-align: right; font-size: 15px;">                                    
                                    <td colspan="6">Balance due</td>
                                    <td><span id="balance_due"></span>
                                        <input type="hidden" name="balance_due_old" id="balance_due_old">
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>                    
                </div>
			</div>
			<div class="modal-footer" style="padding: 2rem;background: #fff;position: sticky;bottom: 0;">
				<button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>				
				<button type="button" onclick="update_invoice()" class="btn btn-primary">@lang('messages.update')</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->