<div class="modal fade" tabindex="-1" role="dialog" id="modal_edit_payment" style="width: 100%;">
	<div class="modal-dialog" role="document" style="width: 100%; height: 100% !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.all_sales_edit')</h4>
			</div>
			<div class="modal-body">
				<div class="row">
                    <div class="col-sm-12" style="font-size: 27px;">
                        <input type="hidden" name="transaction_type" id="transaction_type">
                        <i class="fa fa-clock"></i><span id="doc_number_payment"></span>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Customer</label>
                            <select name="customer_payment" id="customer_payment" class="form-control select2" style="width: 100%">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-1 pull-right">
                        <div class="form group" style="width: 100%;">
                            <label for="" style="font-size: 16px;" class="" id="amount_status_payment">Amount Received</label>
                            <br>
                            <span id="amount_received_payment_html" name="amount_received_payment_html" class="" style="font-size: 30px;">$0</span>
                            {{-- <a href="javascript:void(0)" id="subtotal_bill_payment_old" readonly>Have payment made </a>
                            <input type="hidden" id="subtotal_balance_old"> --}}
                        </div>
                    </div>
                    <div class="clearfix"></div> 
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Payment Date</label>
                            <input class="form-control dob-date-picker" readonly="" name="payment_date_payment" type="text" id="payment_date_payment" value="{{ date('m/d/Y') }}">
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Payment Method</label>
                            <select name="payment_method_payment" id="payment_method_payment" class="form-control select2" style="width: 100%">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Reference no.</label>
                            <input type="text" name="reference_no_payment" id="reference_no_payment" class="form-control">
                        </div>
                    </div>     
                    <div class="col-sm-2">
                        <div class="form-group">
                            <label for="">Deposit To</label>
                            <select name="deposit_payment_account" id="deposit_payment_account" class="form-control select2" style="width: 100%">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-1 pull-right" style="width: 9%;">
                        <div class="form-group">
                            <label for="">Amount Received</label>
                            <input type="text" name="amount_received_payment_input" id="amount_received_payment_input" class="form-control" onchange="calculate_subtotal_expense(this, 'Payment')">
                        </div>
                    </div> 
                    <div class="clearfix"></div>
                    <p>Outstanding Transaction</p>                    
                    <div class="col-sm-12">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th style="width: 2%;">#</th>
                                    <th style="width: 20%;">Description</th>                                    
                                    <th style="width: 10%;">Due Date</th>
                                    <th style="width: 10%;">Original Amount</th>
                                    <th style="width: 10%;">Open Balance</th>
                                    <th style="width: 5%;">Payment</th>
                                    <th style="width: 0%;">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody id="payment_list"></tbody>
                            <tfoot>
                                <tr style="text-align: right;">
                                    <td colspan="5">Amount to Apply</td>
                                    <td id="amount_to_apply_payment"></td>
                                </tr>
                                <tr style="text-align: right;">
                                    <td colspan="5">Amount to Credit</td>
                                    <td id="amount_to_credit_payment"></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>                 
                    <div class="clearfix"></div>                            
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="">Memo</label> 
                            <textarea name="memo_payment" id="memo_payment" cols="30" rows="3" class="form-control"></textarea>   
                        </div>    
                    </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_all_sales()" class="btn btn-primary">@lang('messages.update')</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->