<div class="modal" id="payment_modal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="paymentModalLabel">Payment > <span id="customer_name"></span>
                </h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                    <i class="fa fa-times"></i>
                </button>
            </div>

            <div class="modal-body">
                <div class="row">
                    {{-- payment method --}}
                    <div class="col-md-6">
                        <label class="form-label font-weight-bold">Bank Account</label>
                        <select class="select2" name="bank_id" required>
                            @foreach ($bank_accounts as $bank_account)
                                <option value="{{ $bank_account->id }}">
                                    {{ $bank_account->bank_name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="form-group mt-3">
                            <h5 class="text-center">Payment Option</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <a class="text-white btn btn-primary full_pay_btn">
                                        <i class="fa-solid fa-circle-plus"></i>
                                        Full Payment
                                    </a>
                                </div>
                                <div class="col-md-6 text-right">
                                    <a class="text-white btn btn-danger full_due_btn">
                                        <i class="fa-solid fa-circle-minus"></i>
                                        Full Due
                                    </a>
                                </div>
                            </div>

                            <div class="mt-3 input-group input-group-lg">
                                <span class="input-group-text">Pay Amount</span>
                                <input type="number" class="form-control pay_amount" name="pay_amount" min="0" value="0.00">
                            </div>
                        </div>
                        <div class="form-group mt-3 text-left">
                            <label for="" class="form-label fw-bold"> Note</label>
                            <textarea name="note" class="form-control" rows="2"></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        {{-- order details --}}
                        <h4 class="text-center">Payment Details</h4>
                        <div class="table-responsive">
                            <table class="table">
                                <tfoot>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Subtotal </strong> </th>
                                        <td class="w-40 text-right"><strong> <span class="sub_total">0.00</span> TK</strong></td>
                                    </tr>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Discount </strong> </th>
                                        <td class="w-40 text-right"><strong> <span class="discount_amount">0.00</span> TK</strong></td>
                                    </tr>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Payable Amount <small>(<span class="total_item"></span> items)</small></strong></th>
                                        <input type="hidden" name="payable_amount" id="payable_amount" value="">
                                        <td class="w-40 text-right"><strong> <span class="payable_amount">0.00</span> TK</strong></td>
                                    </tr>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Paid Amount</strong></th>
                                        <input type="hidden" name="paid_amount" id="paid_amount" value="">
                                        <td class="w-40 text-right"><strong> <span class="paid_amount">0.00</span> TK</strong></td>
                                    </tr>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Due Amount</strong></th>
                                        <input type="hidden" name="due_amount" id="due_amount" value="">
                                        <td class="w-40 text-right"><strong> <span class="due_amount">0.00</span> TK</strong></td>
                                    </tr>
                                    <tr>
                                        <th class="text-left w-60" colspan="2"> <strong class="float-left">Balance</strong></th>
                                        <input type="hidden" name="balance" id="balance" value="">
                                        <td class="w-40 text-right"><strong> <span class="balance">0.00</span> TK</strong></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="checkout" id="checkoutButton">Checkout</button>
                <script>
                    $('#checkoutButton').on('click', function() {
                        $(this).prop('disabled', true).text('Processing...');
                    });
                </script>
            </div>
        </div>
    </div>
</div>
