{!! Form::open(['role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'budgetForm']) !!}
<table class="table table-striped table-bordered" style="color:black; border-collapse: collapse;"
    border="1px solid ash;">
    <thead>
        <tr>
            <th rowspan="2" style="width: 25%">Transaction Heads</th>
            <th colspan="12" style="width: 100%">Monthly Budget</th>
            <th rowspan="2" style="width: 5%">Total</th>
        </tr>
        <tr>
            @foreach ($months as $key => $month)
                <th style="width:3%">{{ $month }}</th>
            @endforeach
        </tr>
    </thead>

    @php
        $GLOBALS['operation'] = $operation;
        $GLOBALS['maxLevel'] = $ledgers->max('level');
        $GLOBALS['months'] = $months;
        
        $GLOBALS['childLedgerIds'] = $budgetConfig->pluck('child')->toArray();
        $GLOBALS['parentLedgerIds'] = $budgetConfig->pluck('parent')->toArray();
        
        $GLOBALS['budgetConfig'] = $budgetConfig;
        
        // if $type = receipt nature would be
        // Asset        -> Credit
        // Liability    -> Debit
        // Capital Fund -> Credit
        // Income       -> Credit
        
        // if $type = payment nature would be
        // Asset        -> Debit
        // Liability    -> Credit
        // Capital Fund -> Debit
        // Expenses     -> Debit
        
        // account type 1= Asset, 6 = Liability, 9= Capital Fund, 12 = Income and 13 = Expenses
        
        $GLOBALS['natureRules']['receipt'][1] = 'credit';
        $GLOBALS['natureRules']['receipt'][6] = 'debit';
        $GLOBALS['natureRules']['receipt'][9] = 'credit';
        $GLOBALS['natureRules']['receipt'][12] = 'credit';
        
        $GLOBALS['natureRules']['payment'][1] = 'debit';
        $GLOBALS['natureRules']['payment'][6] = 'credit';
        $GLOBALS['natureRules']['payment'][9] = 'debit';
        $GLOBALS['natureRules']['payment'][13] = 'debit';
        
        function print_ledger($ledgers, $ledger, $type, $parentLedgerId = '', $parentAccountTypeId)
        {
            $childrens = [];
            $nature = @$GLOBALS['natureRules'][$type][$parentAccountTypeId];
            $config = null;
            $config = $GLOBALS['budgetConfig']
                ->where('parentNature', $nature)
                ->where('parent', $ledger->id)
                ->first();
        
            // this ledger may be child of different parents by this nature
            $configAsChild = $GLOBALS['budgetConfig']
                ->where('childNature', $nature)
                ->where('child', $ledger->id)
                ->first();
        
            // according to the config determine whether it will affect the childrens
            if (in_array($ledger->id, $GLOBALS['parentLedgerIds'])) {
                // if config is found according to this nature then it will effect the value of childrens
                if ($config != null) {
                    $childrens = $GLOBALS['budgetConfig']->where('id', $config->id);
                }
            }
        
            $trString = '<tr>' . "<td style='text-align: left;padding-left: 5px;" . ($ledger->level != $GLOBALS['maxLevel'] ? 'font-weight:bold' : '') . "'>$ledger->name[$ledger->code]</td>";
        
            $childParentConfigs = [];
        
            foreach ($GLOBALS['months'] as $key => $month) {
                $monthWithoutComa = str_replace(', ', '', $month);
        
                foreach ($childrens as $key => $child) {
                    $parentConfigs = $GLOBALS['budgetConfig']->where('child', $child->child)->where('childNature', $child->childNature);
        
                    $childParentConfigs[$key] = $parentConfigs;
        
                    $childrens[$key]->month = $monthWithoutComa;
                }
        
                $style = 'style="width:80px;text-align: right;';
                $readonly = 'readonly';
                $function = '';
        
                if ($ledger->isGroupHead) {
                    $style .= 'background-color: #cbd5d6;"';
                } elseif (in_array($ledger->id, $GLOBALS['childLedgerIds']) && $configAsChild != null && $configAsChild->childNature == $nature) {
                    $style .= 'background-color: #bab5b5;"';
                } else {
                    $style .= '"';
                    $readonly = '';
                    // $function = "onInput='changeChildren(" . htmlspecialchars(json_encode($childrens, true), ENT_QUOTES, 'UTF-8') . ', this.value, ' . htmlspecialchars(json_encode($month), ENT_QUOTES, 'UTF-8') . ");'";
        
                    $function = "onInput='changeChildren(" . htmlspecialchars(json_encode($childrens, true), ENT_QUOTES, 'UTF-8') . ', this, ' . htmlspecialchars(json_encode($monthWithoutComa), ENT_QUOTES, 'UTF-8') . ',' . htmlspecialchars(json_encode($childParentConfigs), ENT_QUOTES, 'UTF-8') . ");'";
                }
        
                $trString .= "<td><input type=text id='$ledger->id$nature$monthWithoutComa' name='ledgersNaturesMonths[$ledger->id][$nature][$month]' nature='$nature' month='$monthWithoutComa' ledgerType='$type' ledgerId='$ledger->id' parentLedgerId ='$parentLedgerId' $readonly $style $function></td>";
            }
        
            $trString .= "<td style='text-align: right;'><span style='padding-right: 5px;' class='total' nature='$nature' totalForLedgerId='$ledger->id'></span></td></tr>";
        
            echo $trString;
        
            $childrens = $ledgers->where('parentId', $ledger->id);
            foreach ($childrens as $child) {
                print_ledger($ledgers, $child, $type, $ledger->id, $parentAccountTypeId);
            }
        }
    @endphp
    <tbody>
        <tr>
            <td colspan="14" style="text-align:left;font-size: 18px; font-weight: bold;">Receipt</td>
        </tr>
        @foreach ($receiptTyepLedgers as $receiptTyepLedger)
            @php
                print_ledger($ledgers, $receiptTyepLedger, $type = 'receipt', '', $receiptTyepLedger->accountTypeId);
            @endphp
        @endforeach

        <tr>
            <td colspan="14" style="text-align:left;font-size: 18px; font-weight: bold;">Payment</td>
        </tr>
        @foreach ($paymentTyepLedgers as $paymentTyepLedger)
            @php
                print_ledger($ledgers, $paymentTyepLedger, $type = 'payment', '', $paymentTyepLedger->accountTypeId);
            @endphp
        @endforeach

        <tr>
            <td style="font-weight: bold">Difference</td>
            @foreach ($months as $key => $month)
                @php
                    $monthWithoutComa = str_replace(', ', '', $month);
                @endphp
                <td><input type="text" readonly month="{{ $monthWithoutComa }}" class='diff'
                        style="width:80px;text-align: right; background-color: #99ad9e"></td>
            @endforeach
            <td class='totalDiff'></td>
        </tr>
    </tbody>

</table>

<div class="col-md-12 text-right">
    <div class="form-group" style="font-size: 13px; padding: 4px 6px;">
        {!! Form::label('', '', ['class' => 'control-label col-sm-12']) !!}
        <div class="col-sm-12" style="padding-top: 13px;">
            {!! Form::submit('Save', ['id' => 'budgetSubmit', 'class' => 'btn btn-primary btn-md', 'style' => 'font-size:14px']) !!}
        </div>
    </div>
</div>

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


<script>
    $(document).ready(function() {
        $('#budgetSubmit').click(function(e) {
            e.preventDefault();
            //validation
            // if all difference are zero then it can be submitted
            // ## temporaty commented the validation
            // var isAnyNonZeroDiff = false;
            // $('.diff').each(function(index, element) {
            //     if ($(element).val() != '') {
            //         if (parseFloat($(element).val()) != 0) {
            //             isAnyNonZeroDiff = true;
            //         }
            //     }
            // });

            // if (isAnyNonZeroDiff) {
            //     toastr.warning('All Difference should be Zero.', 'Warning', opts);
            //     return false;
            // }

            $("#budgetSubmit").prop('disabled', true);

            $.ajax({
                type: "POST",
                url: "./storeBudget",
                data: $('#budgetForm, #filteringForm').serialize(),
                dataType: "json",
                success: function(response) {
                    if (response.responseTitle == 'error') {
                        toastr.warning(response.responseText, 'Warning', opts);
                        $("#budgetSubmit").prop('disabled', false);
                    } else {
                        toastr.success(response.responseText, 'Success', opts);
                        setTimeout(function() {
                            window.location.href = './viewBudget';
                        }, 2000);

                    }
                }
            });
        });
    });

    function changeChildren(childrens, element, month, childParentConfigs) {
        $.each(childrens, function(index, child) {
            parentConfigs = childParentConfigs[index];
            var childValue = 0;
            $.each(parentConfigs, function(index, parentConfig) {
                var parent = $("input:text[ledgerId='" + parentConfig.parent + "'][nature='" +
                    parentConfig
                    .parentNature + "'][month='" + month + "']");
                if (parent.val() != '') {
                    childValue += parseFloat(parent.val()) * parentConfig.percentage / 100;
                }
            });
            var childElement = $("input:text[ledgerId='" + child.child + "'][nature='" + child.childNature +
                "'][month='" + month + "']");
            childElement.val(childValue.toFixed(2));

            calculateTotalForChildElement(childElement);
            setParentValue(childElement);
        });

        calculateTotalForChildElement($(element));
        setParentValue($(element));
        calculateDiff(month);
    }


    // calculate total
    function calculateTotalForChildElement(childElement) {
        var start = new Date().getTime();
        var total = 0;

        childElement.closest('tr').find('input').each(
            function(index, element) {
                if ($(element).val() != '') {
                    total += parseFloat($(element).val());
                }
            });

        childElement.closest('tr').find('.total').html(total.toFixed(2));

        // console.log("cal Total  " + (new Date().getTime() - start));
    }

    function setParentValue(element) {
        var start = new Date().getTime();
        parentLedgerId = $(element).attr('parentLedgerId');
        var nature = $(element).attr('nature');
        var month = $(element).attr('month');

        while (parentLedgerId > 0) {

            var parentObj = $("#" + parentLedgerId + nature + month);

            parentValue = 0;

            $("input:text[parentLedgerId=" + parentLedgerId + "][nature=" + nature + "][month='" + month + "']")
                .each(function(index, parentElement) {
                    if ($(parentElement).val() != '') {
                        parentValue += parseFloat($(parentElement).val());
                    }
                });
            parentObj.val(parentValue.toFixed(2));
            calculateTotalForChildElement(parentObj);
            parentLedgerId = parentObj.attr('parentLedgerId');
        }

        console.log("Set Parent   " + (new Date().getTime() - start));
    }


    // calculate difference e.g. (Receipt - Payment)
    function calculateDiff(month) {
        var totalReceipt = 0;
        var totalPayment = 0;

        // calculate total Receipt
        $('input:text[ledgerType="receipt"][parentledgerid=""][month="' + month + '"]').each(function(index, element) {
            if ($(element).val() != '') {
                totalReceipt += parseFloat($(element).val());
            }
        });

        // calculate total Payment
        $('input:text[ledgerType="payment"][parentledgerid=""][month="' + month + '"]').each(function(index, element) {
            if ($(element).val() != '') {
                totalPayment += parseFloat($(element).val());
            }
        });

        var difference = totalReceipt - totalPayment;

        $(".diff[month='" + month + "']").val(difference.toFixed(2));
    }

    // validate input field to float only
    $('input').on('input', function() {
        $(this).val($(this).val().replace(/[^0-9.]/g, ''));
    });
</script>