{!! Form::open(['url' => '', 'id' => 'bulkTxnForm']) !!}
<table class="table table-striped table-bordered" border="1">
    <thead>
        <tr>
            <th rowspan="2">SL NO</th>
            <th rowspan="2">Branch Name</th>
            <th width="130" colspan="2">Member</th>
            <th rowspan="2">Txn Code</th>
            <th rowspan="2">Product</th>
            <th colspan="3">Bkash</th>
            <th rowspan="2">Amount(TK)</th>
            <th style="width: 10%" rowspan="2"><input type="checkbox" onClick="toggle(this)" class="form-control"
                    style="height: 15px;" /><br /></th>
        </tr>

        <tr>
            <th>Name</th>
            <th>Code</th>

            <th>Trx Ref.</th>
            <th>Date</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        @php
            $sl = 1;
        @endphp
        @foreach ($transactions as $key => $transaction)
            <tr>
                <td>
                    {{ $sl++ }}
                    <input type="hidden" name="applicationId[]" value="{{ $transaction->id }}">
                </td>
                <td class="name">{{ $transaction->branchCode }} - {{ $transaction->branchName }}</td>
                <td class="name">{{ $transaction->memberName }}</td>
                <td>{{ $transaction->memberCode }}</td>
                <td>{{ $transaction->txnCodes }}</td>
                <td>{{ $transaction->products }}</td>
                <td>{{ $transaction->transaction_id }}</td>
                <td>{{ date('d-m-Y', strtotime($transaction->tnx_time)) }}</td>
                <td>{{ date('H:i A', strtotime($transaction->tnx_time)) }}</td>

                <td class="amount">
                    {{ number_format($transaction->amount) }}
                    <input type="hidden" name="amount[]" value="{{ $transaction->amount }}">
                </td>
                <td>
                    <input type="checkbox" name="txnChecked[]" class="form-control" style="height:16px;">
                </td>

            </tr>
        @endforeach

        <tr>
            <td colspan="10" class="text-right"><b>Total Amount</b> &nbsp; </td>
            <td>
                {!! Form::text('totalAmount', number_format(0), [
                    'class' => 'form-control text-right',
                    'readonly' => 'readonly',
                    'id' => 'totalAmount',
                ]) !!}
            </td>
        </tr>
        <tr>
            <td colspan="10"></td>
            <td>
                {!! Form::submit('Click here to advice', ['class' => 'btn btn-blue form-control text-uppercase']) !!}
            </td>
        </tr>

    </tbody>
</table>
{!! Form::close() !!}
<script>
    $(document).ready(function() {
        $('[name="txnChecked[]"]').on('click', function() {
            calculateTotalAmount();
        });

        /*Form*/
        $('#bulkTxnForm').off().submit(function(event) {
            event.preventDefault();
            x = confirm('Are you sure to advice?');
            if (x === false) return false;
            $("input[type=submit]").prop('disabled', true);
            $("button").prop('disabled', true);
            $("#loadingModal").show();
            // var accountIds = [];
            var amounts = [];
            var applicationIds = [];
            var ftInLedgerIds = [];
            $('input[name="txnChecked[]"]:checked').each(function(index, el) {
                var row = $(this).closest('tr');
                // accountId = row.find('[name="accountId[]"]').val();
                amount = row.find('[name="amount[]"]').val();
                applicationId = row.find('[name="applicationId[]"]').val();
                ftInLedgerId = row.find('[name="ftInLedgerId[]"]').val();
                // accountIds.push(accountId);
                amounts.push(amount);
                applicationIds.push(applicationId);
                ftInLedgerIds.push(ftInLedgerId);
            });
            $.ajax({
                type: 'post',
                url: "{{ url('acc/bkashPGWreconciliation/batchStore') }}",
                data: {
                    ftOutBankRegisterId: $('#ftOutBankRegisterId').val(),
                    ftInBankRegisterId: $('#ftInBankRegisterId').val(),
                    txTypeId: $('#txTypeId').val(),
                    applicationIds: applicationIds,
                    amounts: amounts,
                    generateDate: $('#generateDate').val(),
                    ftInLedgerIds: ftInLedgerIds
                },
                dataType: 'json',
                success: function(_response) {
                    $("#loadingModal").hide();
                    $("input[type=submit]").prop('disabled', false);
                    $("button").prop('disabled', false);
                    $(".error").remove();
                    if (_response.errors) {
                        $.each(_response.errors, function(name, error) {
                            $("#" + name).after("<p class='error'>* " + _response
                                .errors[name] + "</p>");
                        });
                    } else {
                        if (_response.responseTitle == 'Warning!') {
                            toastr.warning(_response.responseText, _response.responseTitle,
                                opts);
                        } else {
                            toastr.success(_response.responseText, _response.responseTitle,
                                opts);
                            setTimeout(function() {
                                location.reload();
                            }, 2000);
                        }
                    }
                },
                error: function(_response) {
                    $("#loadingModal").hide();
                    $("input[type=submit]").prop('disabled', false);
                    $("button").prop('disabled', false);
                    alert('Response Error');
                }
            });

        });
        /* End Form*/
    });

    function num(argument) {
        return argument.toLocaleString('en-US', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 2
        });
    }

    function calculateTotalAmount() {
        var total_amount = 0;
        $('input[name="txnChecked[]"]:checked').each(function(index, el) {
            var row = $(this).closest('tr');
            var amount = parseFloat(row.find('[name="amount[]"]').val());
            total_amount = total_amount + amount;
        });
        $('input[name="totalAmount"]').val(num(total_amount));
    }

    // for select all row
    function toggle(source) {
        checkboxes = document.getElementsByName('txnChecked[]');
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked = source.checked;
        }
        calculateTotalAmount();
    }
</script>