{!! Form::open(['role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'fundTransferForm']) !!}
    <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 colspan="2">Org. Branch</th>

                            <th colspan="4">Bank Account Information</th>
                            {{-- <th width="100" colspan="5">Component Amount</th> --}}
                            <th colspan="{{ $components->count() + 1 }}">Component Wise Amount</th>
                        </tr>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
    
                            <th>Bank Name</th>
                            <th>A/C Number</th>
                            <th>Routing Number</th>
                            <th>Branch Name</th>


                            @foreach ($components as $component)
                                <th>{{ $component->name }}</th>
                            @endforeach

                            <th>Total</th>
    
                        </tr>
                    </tr>
                </thead>
                <tbody>
                                        @foreach ($BankAcRegisters as $BankAcRegister)

                        {!! Form::hidden('branchId[]', $BankAcRegister->branchId) !!}
                        {!! Form::hidden('debitAcId[]', $BankAcRegister->id) !!}

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

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

                            @foreach ($components as $component)
                                <td style="padding: 5px;"> 
                                    {!! Form::text('componentAmount['.$BankAcRegister->id.']['.$BankAcRegister->ledgerIdFk.']['.$BankAcRegister->projectId.']['.$BankAcRegister->projectTypeId.']['.$BankAcRegister->branchId.']['.$component->id.']['.$component->ledgerIdFk.']', $value = null, ['class'=>'form-control text-right amount component-amount', 'placeholder' => '-', 'data-id' => $component->id]) !!}
                                </td>
                            @endforeach

                            <td style="padding: 5px;"> 
                                {!! Form::text('componentRowTotal', $value = null, ['class' => 'form-control text-right amount component-row-total', 'style' => 'font-weight: bold', 'readonly', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off']) !!}
                            </td>


                        </tr>
                    @endforeach

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

                        @foreach ($components as $component)
                            <th>{!! Form::text('componentColGrandTotal['.$component->id.']', $value = null, ['class'=>'form-control text-right amount component-col-grand-total', 'readonly', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off']) !!}</th>
                        @endforeach

                        <td style="padding: 5px;"> 
                            {!! Form::text('totalColGrandTotal', $value = null, ['class' => 'form-control text-right amount total-col-grand-total', 'style' => 'font-weight: bold', 'readonly', 'type' => 'text', 'placeholder' => '-', 'autocomplete' => 'off']) !!}
                        </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('fundTransferDdiRegisterListFiltering/') }}"
                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() {

            $(document).on("input",".amount",function() {
                this.value = this.value.replace(/[^0-9]/g, '').replace(/(\..*)\./g, '$1'); 
            });

            // Listen for input changes in the amount fields
            $(document).on('keyup', '.component-amount', function () {
                var row = $(this).closest('tr');
                formatNumber($(this));
                totalSum(row);
                updateComponentTotal(row);
                updateComponentRowTotal(row);
                updateComponentGrandTotal();
            });

            // Format number with commas
            function formatNumber(inputField) {
                var amount = +inputField.val().replaceAll(",", "");
                inputField.val(amount.toLocaleString("en-IN"));
            }

            // Addition function for each row
            function totalSum(row) {
                var total = 0;
                row.find('.component-amount').each(function () {
                    total += +$(this).val().replaceAll(",", "");
                });
                row.find('.component-row-total').val(total.toLocaleString("en-IN"));
            }

            // Update component total
            function updateComponentTotal(row) {
                var componentTotal = 0;
                row.find('.component-amount').each(function () {
                    componentTotal += +$(this).val().replaceAll(",", "");
                });
                row.find('.component-row-total').val(componentTotal.toLocaleString("en-IN"));
            }

            // Update component row total
            function updateComponentRowTotal(row) {
                var rowTotal = 0;
                row.find('.component-row-total').each(function () {
                    rowTotal += +$(this).val().replaceAll(",", "");
                });
                $('#componentColGrandTotal').val(rowTotal.toLocaleString("en-IN"));
            }

            // Update component grand total and totalColGrandTotal
            function updateComponentGrandTotal() {
                var totalColGrandTotal = 0;

                $('.component-col-grand-total').each(function () {
                    var identifier = $(this).attr('name').split('[')[1].split(']')[0];
                    var grandTotal = 0;

                    if (identifier) {
                        $('.component-amount[data-id="' + identifier + '"]').each(function () {
                            var amountValue = $(this).val().replaceAll(",", "");
                            grandTotal += isNaN(amountValue) ? 0 : +amountValue;
                        });

                        $(this).val(grandTotal.toLocaleString("en-IN"));
                        totalColGrandTotal += grandTotal;
                    } else {
                        console.error('Error: Unable to extract identifier for component-col-grand-total');
                    }
                });

                // Update the totalColGrandTotal field
                $('input[name="totalColGrandTotal"]').val(totalColGrandTotal.toLocaleString("en-IN"));
            }
                            

        
           
            
            $('#fundTransferForm').submit(function(event) {
                event.preventDefault();
                $.ajax({
                    type: 'post',
                    url: "{{ url('adviceFundTransferDdiItem/') }}",
                    data: $('#fundTransferForm, #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('fundTransferDdiRegisterListFiltering/') }}";
                                }, 2000);
                            }else{
                                toastr.warning(data.responseText, data.responseTitle, opts);
                            }
                        }
                    },
                    error: function(_response) {
                        // Handle error
                        alert(_response.errors);
                    }
                });
            });


        });


    </script>