{!! 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/bkashReconciliation/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>