{!! Form::open(['role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'bankReconcileForm']) !!}
    <div class="row" style=" margin: 15px 0px;">
        <div class="table-responsive">
            <table class="table table-striped table-bordered" id="vaultReport" style="color:black;">
                <thead>
                    <tr>
                        <tr>
                            <th rowspan="2">SL#</th>
    
                            <th rowspan="2">Branch</th>

                            <th colspan="3">Bank Account Information</th>
                            <th colspan="3">Balance</th>
                        </tr>
                        <tr>
                            <th>Bank Name</th>
                            <th>A/C Number</th>
                            <th>Branch Name</th>

                            <th>Bank Book</th>
                            <th>Bank Statement</th>
                            <th>Diffrence</th>
    
                        </tr>
                    </tr>
                </thead>
                <tbody>
                                        @foreach ($BankAcRegisters as $BankAcRegister)

                        <input type="hidden" name="projectId[]" value="{{ $BankAcRegister->projectId }}">
                        <input type="hidden" name="ProjectTypeId[]" value="{{ $BankAcRegister->projectTypeId }}">
                        <input type="hidden" name="branchId[]" value="{{ $BankAcRegister->branchId }}">
                        <input type="hidden" name="ledgerId[]" value="{{ $BankAcRegister->ledgerIdFk }}">

                        <tr class="item{{ ($no + 1) }}">
                            <td class="text-center slNo">{{ ++$no }}</td>

                            <td style="text-align: left; padding-left: 1em;"> {{ $BankAcRegister->branchCodeWith0 }} - {{ $BankAcRegister->branchName }}</td>

                            <td style="text-align: left; padding-left: 1em;"> {{ $BankAcRegister->bankName }} </td>
                            <td style="text-align: middle;"> {{ $BankAcRegister->bankAcNumber }} </td>
                            <td style="text-align: left; padding-left: 1em;"> {{ $BankAcRegister->bankBranchName }}, {{ $BankAcRegister->district }} </td>

                            <td style="text-align: middle; padding-left: 1em; padding-right: 1em;"> 
                                {!! Form::text('bankBookBalance', $BankAcRegister->balance, ['class' => 'form-control text-right bankBookBalance', 'id' => 'bankBookBalance', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off', 'readonly']) !!} 
                            </td>

                            <td style="text-align: middle; padding-left: 1em; padding-right: 1em;"> 
                                {!! Form::text('bankBalance[]', $existingRecords[$BankAcRegister->ledgerIdFk] ?? null, ['class' => 'form-control text-right bankBalance', 'id' => 'bankBalance', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off', 'readonly' => $BankAcRegister->isAllowEntry ? false  : true]) !!} 
                            </td>

                            <td style="text-align: middle; padding-left: 1em; padding-right: 1em;"> 
                                {!! Form::text('balanceDifference', null, ['class' => 'form-control text-right balanceDifference', 'id' => 'balanceDifference', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off', 'readonly']) !!} 
                            </td>

                        </tr>
                    @endforeach

                    <tr>
                        <td colspan="5" style= "text-align: right;  padding-right: 1em; font-weight: bold;">Total:</td>

                        <td style="text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em;">
                            {!! Form::text('bankBookBalanceTotalSum', null, ['class' => 'form-control text-right', 'id' => 'bankBookBalanceTotalSum', 'readonly', 'type' => 'text', 'placeholder' => '0', 'autocomplete' => 'off']) !!}
                        </td>
                        <td style="text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em;">
                            {!! Form::text('bankBalanceTotalSum', null, ['class' => 'form-control text-right', 'id' => 'bankBalanceTotalSum', 'readonly', 'type' => 'text', 'placeholder' => '0', 'autocomplete' => 'off']) !!}
                        </td>
                        <td style="text-align: right; font-weight: bold; padding-left: 1em; padding-right: 1em;">
                            {!! Form::text('differenceTotalSum', null, ['class' => 'form-control text-right', 'id' => 'differenceTotalSum', 'readonly', 'type' => 'text', 'placeholder' => '0', 'autocomplete' => 'off']) !!}
                        </td>
                        <td></td>
                        
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
    
    <div class="form-group">
        {!! Form::label('submit', ' ', ['class' => 'col-sm-5 control-label']) !!}
        <div class="col-sm-5">
            {!! Form::submit('Submit', ['id' => 'fundTransferSubmit', 'class' => 'btn btn-success']) !!}
            <a href="{{ url('bankReconcileRegisterListFiltering/') }}"
                class="btn btn-danger closeBtn">Close</a>
            <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
        </div>
    </div>

    {!! Form::close() !!}

       
    <script type="text/javascript">

        $(document).ready(function() {

            // Function to calculate the difference and update the total sums
            function calculateAndUpdateTotals() {
                let totalBankBookBalance = 0;
                let totalBankBalance = 0;
                let totalDifference = 0;

                $('tr').each(function () {
                    const bankBookBalance = parseFloat($(this).find('.bankBookBalance').val()) || 0;
                    const bankBalance = parseFloat($(this).find('.bankBalance').val()) || 0;
                    const difference = bankBookBalance - bankBalance;

                    totalBankBookBalance += bankBookBalance;
                    totalBankBalance += bankBalance;
                    

                    if(bankBookBalance === difference){
                        $(this).find('.balanceDifference').val(bankBookBalance);
                    }else{
                        $(this).find('.balanceDifference').val(difference.toFixed(2));
                        totalDifference += difference;
                    }
                    

                });

                $('#bankBookBalanceTotalSum').val(totalBankBookBalance.toFixed(2));
                $('#bankBalanceTotalSum').val(totalBankBalance.toFixed(2));
                $('#differenceTotalSum').val(totalDifference.toFixed(2));
            }

            // Initial calculation to set the total sums on page load
            calculateAndUpdateTotals();

            $('.bankBalance').on('keyup', function() {
                calculateAndUpdateTotals();
            });

        

            $('#bankReconcileForm').submit(function(event) {
                event.preventDefault();
                $.ajax({
                    type: 'post',
                    url: "{{ url('addOrUpdateBankReconcileItem/') }}",
                    data: $('#bankReconcileForm, #searchForm').serialize(),
                    dataType: 'json',
                    success: function(data) {
                        if (data.errors) {

                        } else {
                            if(data.responseTitle == "Success!"){
                                toastr.success(data.responseText, data.responseTitle, opts);
                                setTimeout(function(){
                                    window.location.href =
                                    "{{ url('bankReconcileRegisterListFiltering/') }}";
                                }, 2000);
                            }else{
                                toastr.warning(data.responseText, data.responseTitle, opts);
                            }
                        }
                    },
                    error: function(_response) {
                        // Handle error
                        alert(_response.errors);
                    }
                });
            });


        });


    </script>