@php
    $payable_amount = $item->nettotal - $item->payments->sum('amount');
@endphp
<div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Sale Payment</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="@if ($payable_amount > 0) col-md-8 @else col-md-12 @endif">
                    <div class="row">
                        @include('sales.profiles.profile_details')
                    </div>
                </div>
                @if ($payable_amount > 0 )
                    <div class="col-md-4 payment_row" style="border-left: 1px #ccc solid;">
                        <form action="{{ route('sale_payment.store') }}" method="POST" id="ajax_form">
                            @csrf
                            <input type="hidden" name="sale_id" value="{{ $item->id }}">
                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="invoiceNo" class="mb-1 me-2" style="width: 40%;">Invoice
                                    No</label>
                                <input type="text" class="form-control" id="invoiceNo" placeholder="Invoice No"
                                    name="invoice_no" value="{{ invoiceNo('sale_payment') }}" disabled
                                    style="width: 60%;">
                            </div>
                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="purchaseDate" class="mb-1 me-2" style="width: 40%;">Invoice
                                    Date</label>
                                <input type="datetime-local" class="form-control" id="purchaseDate"
                                    placeholder="Payment date" name="date" value="{{ date('Y-m-d\TH:i') }}"
                                    style="width: 60%;">
                            </div>
                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="payableAmount" class="mb-1 me-2" style="width: 40%;">Payable
                                    Amount</label>
                                <input type="number" class="form-control totalNetTotal text-right" id="payableAmount"
                                    placeholder="Payable Amount" disabled style="width: 60%;"
                                    value="{{ numberformat($payable_amount) }}" step="any">
                                <input type="hidden" class="form-control totalNetTotal" name="nettotal"
                                    value="{{ $payable_amount }}">
                            </div>
                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="dueAmount" class="mb-1 me-2" style="width: 40%;">Paid
                                    Amount</label>
                                <input type="number" class="form-control text-right paidamount" name="paid_amount"
                                    placeholder="Paid Amount" style="width: 60%;" step="any">
                            </div>

                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="dueAmount" class="mb-1 me-2" style="width: 40%;">Due
                                    Amount</label>
                                <input type="text" class="form-control text-right dueamount" placeholder="Due Amount"
                                    disabled style="width: 60%;">
                                <input type="hidden" class="form-control dueamount" name="due_amount">
                            </div>

                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="changeAmount" class="mb-1 me-2" style="width: 40%;">Change
                                    Amount</label>
                                <input type="number" class="form-control text-right changeamount"
                                    placeholder="Change Amount" disabled style="width: 60%;" step="any">
                                <input type="hidden" class="form-control changeamount" name="change_amount">
                            </div>

                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="changeAmount" class="mb-1 me-2" style="width: 40%;">Payment
                                    Method</label>
                                <select name="payment_method" id="payment_method" class="form-control"
                                    style="width: 60%;">
                                    <option value="">Choice...</option>
                                    @foreach (payment_method() as $payment_method)
                                        <option value="{{ $payment_method }}">
                                            {{ Str::ucfirst($payment_method) }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="form-group mb-1 d-flex align-items-center">
                                <label for="changeAmount" class="mb-1 me-2" style="width: 40%;">Account</label>
                                <select name="account_id" class="form-control" style="width: 60%;">
                                    <option value="">Choice...</option>
                                    @foreach ($accounts as $account)
                                        <option value="{{ $account->id }}">{{ $account->account_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="method_information my-3"></div>
                            <hr>
                            <div>
                                <button type="submit" class="btn btn-primary" style="width:100%;">Make
                                    Payment</button>
                            </div>
                        </form>
                    </div>
                @endif

            </div>
            @if ($payments->count() > 0)
                <div class="row mt-3">
                    <div class="col-md-12">
                        @include('sales.profiles.payments')
                    </div>
                </div>
            @endif

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

<script>
    $(document).ready(function() {

        function getMethodInfo() {
            var payment_method = $("#payment_method").val();
            if (payment_method) {
                $.ajax({
                    url: "{{ route('account_method.get-method-infirmations') }}",
                    type: 'post',
                    datatype: 'html',
                    data: {
                        payment_method: payment_method
                    },
                    success: function(data) {
                        console.log(data);
                        $('.method_information').empty();
                        $('.method_information').html(data);
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            } else {
                $('.method_information').empty();
            }

        }

        $("#payment_method").change(function() {
            getMethodInfo();
        });



        function updateDueAndChangeAmounts() {
            let payableAmount = parseFloat($("input.totalNetTotal").val()) || 0;
            let paidAmount = parseFloat($(".paidamount").val()) || 0;

            if (payableAmount < paidAmount) {
                // If payable amount is less than paid amount, calculate change
                let changeAmount = paidAmount - payableAmount;
                $(".changeamount").val(changeAmount.toFixed(3));
                $(".dueamount").val(0); // Reset due amount
            } else {
                // If payable amount is greater than paid amount, calculate due
                let dueAmount = payableAmount - paidAmount;
                $(".dueamount").val(dueAmount.toFixed(3));
                $(".changeamount").val(0); // Reset change amount
            }
        }
        $(".gross_discount_value").on("input", function() {
            calculateSums();
        });

        // Event listener for changes in payable amount and paid amount
        $("input.totalNetTotal, .paidamount").on("input", function() {
            updateDueAndChangeAmounts();
        });



    });
</script>