@extends('layouts/acc_layout')
@section('title', '| MIS Yearly Budget Details')
@section('content')


{{-- STYLE  --}}

<style media="screen">

    .level-final td {
        font-size: .92em;
    }
    .level-final td.title {
        padding-left: 5px !important;
    }
    .total td {
        padding-left: 5px !important;
        font-size: 1.15em;
    }
    .amount-title {
        width: 15%;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .level-1 td, .level-2 td, .level-3 td, .level-4 td, .level-constant td{
        font-weight: bold !important;
        padding-left: 5px !important;
        text-transform: uppercase;
    }
    .level-1 td{
        font-size: 1.04em;
    }
    .level-2 td{
        font-size: 1.00em;
        /* padding-left: 15px !important; */
    }
    .level-3 td{
        font-size: .96em;
        /* padding-left: 25px !important; */
    }
    .level-4 td{
        font-size: .92em;
        /* padding-left: 35px !important; */
    }
    .level-constant td{
        font-size: .88em;
        /* padding-left: 45px !important; */
    }
    .level-transformed td{
        font-weight: normal !important;
        font-size: .88em;
        padding-left: 5px !important;
        text-transform: capitalize;
    }
    .level-final td{
        font-weight: normal !important;
        text-transform: none;
    }
    .total td{
        padding-left: 5px !important;
        font-size: 1.05em;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
    }

    input[type=number] {
        -moz-appearance:textfield; /* Firefox */
    }
    .test{
        cursor: not-allowed;
        background-color: #eee;
        opacity: 1
    }
    .test1{
        cursor: allowed;
        background-color: #fff;
        opacity: 1
    }
   
</style>


<style type="text/css">
    #budgetTable {
        font-family: arial !important;
    }

    .subTotalTr td{
        background-color: #9cb1d3;
    }
    .grandTotal td{
        background-color: #819bc4;
    }
    .funTotal td{
        background-color: #8296b7;
    }
    .allFunOrgTotal td{
        background-color: #55729e;
    }
    .note{
        color: white;
        font-size: 10px;
        margin-top: 1px;
    }

    #reportInfoTable tr td:nth-child(1){
        width: 35px;
    }
    #reportInfoTable tr td:nth-child(2),#reportInfoTable tr td:nth-child(6){
        width: 5px;
    }
    #reportInfoTable tr td:nth-child(3){
        width: 100px;
    }

    #reportInfoTable tr td:nth-child(4){
        width: 200px;
    }

    #reportInfoTable tr td:nth-child(5){
        width: 150px;
        text-align: right;
        padding-right: 5px;
    }
    #reportInfoTable tr td:nth-child(7){
        width: 25px;
        text-align: right !important;
    }

    .text-left{
        text-align: left !important;
        padding-left: 5px !important;
    }

    .text-right{
        text-align: right !important;
        padding-right: 5px !important;
    }

    .text-center{
        text-align: center !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .w10{
        min-width: 10px !important;
        max-width: 10px !important;
    }
    .w20{
        min-width: 20px !important;
        max-width: 20px !important;
    }
    .w30{
        min-width: 30px !important;
        max-width: 30px !important;
    }
    .w40{
        min-width: 40px !important;
        max-width: 40px !important;
    }
    .w50{
        min-width: 50px !important;
        max-width: 50px !important;
    }
    .w60{
        min-width: 60px !important;
        max-width: 60px !important;
    }
    .w70{
        min-width: 70px !important;
        max-width: 70px !important;
    }
    .w80{
        min-width: 80px !important;
        max-width: 80px !important;
    }
    .w90{
        min-width: 90px !important;
        max-width: 90px !important;
    }
    .w100{
        min-width: 100px !important;
        max-width: 100px !important;
    }
    .w120{
        min-width: 120px !important;
        max-width: 120px !important;
    }
    .w140{
        min-width: 140px !important;
        max-width: 140px !important;
    }
    .w160{
        min-width: 160px !important;
        max-width: 160px !important;
    }
    .w180{
        min-width: 180px !important;
        max-width: 180px !important;
    }
    .w200{
        min-width: 200px !important;
        max-width: 200px !important;
    }
</style>

<div class="row">
<div class="col-md-12">

    <div class="panel panel-default" style="background-color:#708090;">
        
        <div class="panel-heading" style="padding-bottom:0px">
            <div class="panel-options">                    
                <a href="{{url('/misYearlyBudget/view')}}" class="btn btn-info pull-right addViewBtn" style="margin: 10px"><i class="glyphicon glyphicon-th-list viewIcon"></i>MIS Yearly Budget List</a>
                
                <button id="printIcon" class="btn btn-info pull-right print-icon" style="">
                    <i class="fa fa-print fa-lg" aria-hidden="true"> Print</i>
                </button>

            </div>

            <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;">Budget Details</h3>
        </div>

        <div class="panel-body panelBodyView">

            <div id="printDivUpper">
                <div class="row" style="padding-bottom: 10px; text-align: center; vertical-align: middle; color: black; font-weight: bold; "> {{-- div for Company --}}
                    <span style="font-size:14px;">Project: {{ $projectName }}</span><br/>
                    <span style="font-size:11px;">Branch: {{ $branchName }}</span><br/>
                    <span style="font-size:11px;">Fiscal Year: {{ $fiscalyear }}</span><br/>
                    <span style="text-decoration: underline;  font-size:14px;">{{ ucfirst($budgetType) }} Budget</span>            
                </div>                          
            </div>

            <div class="table-responsive" id="printDiv1">
                {!! Form::open(array('url' => '', 'id' => 'budget-form', 'role' => 'form')) !!}
                <table id="budgetTable" class="table table-hover table-sm table-bordered" style="color:black; border-collapse: collapse; border:1px solid ash;">
                    <thead>
                        <tr>
                            <th rowspan="2" colspan="2">Particulars</th>
                            <th rowspan="2" colspan="1">Opening <br> <span style="font-size: 9px" title="Branch month end date">{{ date_format( date_create($branchMonthEndDate),"d/m/Y") }}</span> </th>
                            <th rowspan="1" colspan="12"> {{ ucfirst($budgetType) }}</th>
                            <th rowspan="2" colspan="1">Total</th>
                        </tr>
                        <tr>                
                            <th>Jul, {{ $partOfyear[0] }}</th>
                            <th>Aug, {{ $partOfyear[0] }}</th>
                            <th>Sep, {{ $partOfyear[0] }}</th>
                            <th>Oct, {{ $partOfyear[0] }}</th>
                            <th>Nov, {{ $partOfyear[0] }}</th>
                            <th>Dec, {{ $partOfyear[0] }}</th>
                            <th>Jan, {{ $partOfyear[1] }}</th>
                            <th>Feb, {{ $partOfyear[1] }}</th>
                            <th>Mar, {{ $partOfyear[1] }}</th>
                            <th>Apr, {{ $partOfyear[1] }}</th>
                            <th>May, {{ $partOfyear[1] }}</th>
                            <th>Jun, {{ $partOfyear[1] }}</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php $productCategoryname = ''; @endphp
                        @foreach($budgets as $key => $item) 
                            
                            @php
                                $value[1]  = $item['july'];      
                                $value[2]  = $item['august'];    
                                $value[3]  = $item['september']; 
                                $value[4]  = $item['october'];   
                                $value[5]  = $item['november'];  
                                $value[6]  = $item['december'];  
                                $value[7]  = $item['january'];   
                                $value[8]  = $item['february'];  
                                $value[9]  = $item['march'];     
                                $value[10] = $item['april'];     
                                $value[11] = $item['may'];       
                                $value[12] = $item['june'];     
                                
                                if($budgetType == 'member_savings'){
                                    if($productCategoryname != $savingsProductCategories[$item['savingsProductCategoryIdFk']]) $productCategoryname = $savingsProductCategories[$item['savingsProductCategoryIdFk']];
                                    else $savingsProductCategories[$item['savingsProductCategoryIdFk']] = '';
                                } else {
                                    if($productCategoryname != $loanProductCategories[$item['loanProductCategoryIdFk']]) $productCategoryname = $loanProductCategories[$item['loanProductCategoryIdFk']];
                                    else $loanProductCategories[$item['loanProductCategoryIdFk']] = '';
                                }
                            @endphp
                            
                            <tr>
                                @if($budgetType == 'member_savings')
                                    @if($savingsProductCategories[$item['savingsProductCategoryIdFk']])
                                        <td class="w80 text-left" id="{{ $key }}" rowspan="3">{{ $productCategoryname }}</td>
                                    @endif
                                @else
                                    @if($loanProductCategories[$item['loanProductCategoryIdFk']])
                                        <td class="w80 text-left" id="{{ $key }}" rowspan="3">{{ $productCategoryname }}</td>
                                    @endif
                                @endif
                                
                                
                                <td class="w80 text-left">                                                                        
                                    @if($budgetType == 'samity')
                                        @if($item['operation'] == 'Add') Add
                                        @elseif($item['operation'] == 'Cancellation') Cancellation
                                        @elseif($item['operation'] == 'Closing') Closing Samity
                                        @endif
                                    @elseif($budgetType == 'member')
                                        @if($item['operation'] == 'Add') Admission
                                        @elseif($item['operation'] == 'Cancellation') Cancellation
                                        @elseif($item['operation'] == 'Closing') Closing Member
                                        @endif
                                    @elseif($budgetType == 'borrower')
                                        @if($item['operation'] == 'Add') Add Loanee
                                        @elseif($item['operation'] == 'Cancellation') Fully Paid
                                        @elseif($item['operation'] == 'Closing') Closing Borrower
                                        @endif
                                    @elseif($budgetType == 'employee')
                                        @if($item['operation'] == 'Add') Add Employee
                                        @elseif($item['operation'] == 'Cancellation') Cancellation
                                        @elseif($item['operation'] == 'Closing') Closing Employee
                                        @endif
                                    @elseif($budgetType == 'loan_outstanding')
                                        @if($item['operation'] == 'Add') Disbursement
                                        @elseif($item['operation'] == 'Cancellation') Recovery
                                        @elseif($item['operation'] == 'Closing') Outstanding
                                        @endif                                
                                    @elseif($budgetType == 'member_savings')
                                        @if($item['operation'] == 'Add') Collection
                                        @elseif($item['operation'] == 'Cancellation') Refund
                                        @elseif($item['operation'] == 'Closing') Closing Balance
                                        @endif
                                    @endif                                   
                                </td>

                                <td class="w80" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> 
                                    @if($item['operation'] == 'Closing') 
                                        @if($isEdit)
                                            <input value="{{ $item['opening'] }}" min="0" type="number" class="form-control form-control text-right" id="opening_{{ $key }}" name="opening_{{ $key }}" /> 
                                        @else 
                                            <span id="opening_{{ $key }}"> @if($item['opening'] > 0) {{ $item['opening'] }} @else - @endif</span>
                                        @endif                                            
                                    @endif 
                                </td>

                                @for ($i = 1; $i <= 12; $i++)
                                    <td class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> 
                                        @if($isEdit)
                                            @if($item['operation'] == 'Closing') 
                                                <input value="{{ $value[$i] }}" min="0" type="number" class="form-control form-control text-right" id="{{ strtolower($item['operation']) }}_{{ $key }}_{{ $i }}" name="{{ strtolower($item['operation']) }}_{{ $key }}_{{ $i }}" readonly /> 
                                            @else 
                                                <input value="{{ $value[$i] }}" min="0" type="number" class="form-control form-control text-right" id="{{ strtolower($item['operation']) }}_{{ $key }}_{{ $i }}" name="{{ strtolower($item['operation']) }}_{{ $key }}_{{ $i }}" /> 
                                            @endif
                                        @else 
                                            <span id="{{ strtolower($item['operation']) }}_{{ $key }}_{{ $i }}">@if($value[$i] > 0) {{ $value[$i] }} @else - @endif</span>
                                        @endif
                                    </td>
                                @endfor

                                <td class="w80" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> 
                                    @if($isEdit)
                                        <input value="{{ $item['total'] }}" min="0" type="number" class="form-control form-control text-right" id="total_{{ strtolower($item['operation']) }}_{{ $key }}" name="total_{{ strtolower($item['operation']) }}_{{ $key }}" readonly /> 
                                    @else 
                                        <span id="total_{{ strtolower($item['operation']) }}_{{ $key }}">@if($item['total'] > 0) {{ $item['total'] }} @else - @endif</span>
                                    @endif
                                </td>
                            </tr>

                        @endforeach
                        <tr>
                            <td rowspan="3" class="text-left">Total</td>
                            <td class="text-left">
                                @if($budgetType == 'samity')
                                    Add
                                @elseif($budgetType == 'member')
                                    Admission
                                @elseif($budgetType == 'borrower')
                                    Add Loanee
                                @elseif($budgetType == 'employee')
                                    Add Employee
                                @elseif($budgetType == 'loan_outstanding')
                                    Disbursement
                                @elseif($budgetType == 'member_savings')
                                    Collection
                                @endif                               
                            </td>

                            <td rowspan="3" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}" id="totalOpening"> {{ $totalOpening }} </td>
                
                            @for ($i = 1; $i <= 12; $i++)
                                <td id="gTotal_add_{{ $i }}" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> {{ $totalAdd[$i] }} </td>
                            @endfor
                
                            <td class="w80" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}" id="gTotalAdd"> {{ $gTotalAdd }} </td>
                        </tr>
                        <tr>
                            <td class="text-left">
                                @if($budgetType == 'samity')
                                    Cancellation
                                @elseif($budgetType == 'member')
                                    Cancellation
                                @elseif($budgetType == 'borrower')
                                    Fully Paid
                                @elseif($budgetType == 'employee')
                                    Cancellation
                                @elseif($budgetType == 'loan_outstanding')
                                    Recovery
                                @elseif($budgetType == 'member_savings')
                                    Refund
                                @endif
                            </td>
                            
                            @for ($i = 1; $i <= 12; $i++)
                                <td id="gTotal_cancellation_{{ $i }}" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> {{ $totalCancellation[$i] }} </td>
                            @endfor
                
                            <td id="gTotalCancellation" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> {{ $gTotalCancellation }} </td>
                        </tr>
                        <tr>
                            <td class="text-left">
                                @if($budgetType == 'samity')
                                    Closing Samity
                                @elseif($budgetType == 'member')
                                    Closing Member
                                @elseif($budgetType == 'borrower')
                                    Closing Borrower
                                @elseif($budgetType == 'employee')
                                    Closing Employee
                                @elseif($budgetType == 'loan_outstanding')
                                    Outstanding
                                @elseif($budgetType == 'member_savings')
                                    Closing Balance
                                @endif
                            </td>
                
                            @for ($i = 1; $i <= 12; $i++)
                                <td id="gTotal_closing_{{ $i }}" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> {{ $totalClosing[$i] }} </td>
                            @endfor
                
                            <td id="gTotalClosing" class="{{ ($budgetType == 'member_savings' || $budgetType == 'loan_outstanding') ? 'text-right' : 'text-center'  }}"> {{ $gTotalClosing }} </td>
                        </tr>
                    </tbody>
                    @if($isEdit)
                        <tfoot>
                            <td colspan="17" class="text-right">{!! Form::submit('Save', ['id' => 'budgetSubmit', 'class' => 'btn btn-primary btn-md', 'style'=>'font-size:12px']); !!}</td>
                        </tfoot>
                    @endif
                </table>

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

            </div>


        </div> <!--end of panel body-->            
    </div> <!--end of panel-->

</div>
</div>



<script type="text/javascript">
    $(document).ready(function() {
        let isEdit = parseInt ( "{{ $isEdit }}" );
        let budgetKeys = "{{ $budgetKeys }}".split(",").map( Number );
        let total_add = new Array(budgetKeys.length).fill(0);
        let total_cancellation = new Array(budgetKeys.length).fill(0);
        
        calculateGrandTotal();

        // budgetKeys.forEach( (key, index) => {

        //     calculateAdd(key);
        //     calculateCancellation(key);   
        //     calculateClosing(key);
        //     calculateTotalClosing(key);

        //     $(`input#opening_${key}`).on('input',function(e){                  
        //         calculateClosing(key);
        //         calculateTotalClosing(key);
        //         calculateGrandTotal();
        //     });

        //     for(let monthNo=1; monthNo<=12; monthNo++) {

        //         $(`input#add_${key}_${monthNo}`).on('input',function(e){                    
        //             calculateAdd(key);
        //             calculateClosing(key);
        //             calculateTotalClosing(key);
        //             calculateGrandTotal();
        //         }); // on add input change

        //         $(`input#cancellation_${key}_${monthNo}`).on('input',function(e){
        //             calculateCancellation(key);                    
        //             calculateClosingForCancellation(key);
        //             calculateTotalClosing(key);
        //             calculateGrandTotal();
        //         }); // on cancellation input change                  
                
        //     } // moths loop end

        // }); // category loop end
        
        budgetKeys.forEach( (key, index) => {

            calculateAdd(key);
            calculateCancellation(key);   
            calculateClosing(key);
            calculateTotalClosing(key);

            $(`input#opening_${key}`).on('input',function(e){                  
                calculateClosing(key);
                calculateTotalClosing(key);
                calculateGrandTotal();
            });
            
            $(`input#add_${key}_1`).on('input',function(e){
                for(let monthNo=2; monthNo<=12; monthNo++) {
                    $(`input#add_${key}_${monthNo}`).val( $(`input#add_${key}_1`).val() );
                }
            });

            $(`input#cancellation_${key}_1`).on('input',function(e){
                for(let monthNo=2; monthNo<=12; monthNo++) {
                    $(`input#cancellation_${key}_${monthNo}`).val( $(`input#cancellation_${key}_1`).val() );
                }
            });

            for(let monthNo=1; monthNo<=12; monthNo++) {

                $(`input#add_${key}_${monthNo}`).on('input',function(e){                    
                    calculateAdd(key);
                    calculateClosing(key);
                    calculateTotalClosing(key);
                    calculateGrandTotal();
                }); // on add input change

                $(`input#cancellation_${key}_${monthNo}`).on('input',function(e){
                    calculateCancellation(key);                    
                    calculateClosingForCancellation(key);
                    calculateTotalClosing(key);
                    calculateGrandTotal();
                }); // on cancellation input change                  
                
            } // moths loop end

        }); // category loop end



        function calculateAdd(key){
            total_add[key] = 0;
            for(let i=1; i<=12; i++) {
                if(isEdit) total_add[key] += parseInt( $(`#add_${key}_${i}`).val() ) || 0;
                else total_add[key] += parseInt( $(`#add_${key}_${i}`).text() ) || 0;
            }

            if(isEdit) $(`#total_add_${key}`).val(total_add[key]);
            else (total_add[key] > 0) ? $(`#total_add_${key}`).text(total_add[key]) : $(`#total_add_${key}`).text('-');
        }

        function calculateCancellation(key){
            total_cancellation[key] = 0;
            for(let i=1; i<=12; i++) {
                if(isEdit) total_cancellation[key] += parseInt( $(`#cancellation_${key}_${i}`).val() ) || 0;
                else total_cancellation[key] += parseInt( $(`#cancellation_${key}_${i}`).text() ) || 0;
            }

            if(isEdit) $(`#total_cancellation_${key}`).val(total_cancellation[key]);
            else (total_cancellation[key] > 0) ? $(`#total_cancellation_${key}`).text(total_cancellation[key]) : $(`#total_cancellation_${key}`).text('-');
        }

        function calculateClosing(key){
            let openingVal = 0;
            if(isEdit) openingVal = parseInt( $(`#opening_${key+2}`).val() ) || 0;
            else openingVal = parseInt( $(`#opening_${key+2}`).text() ) || 0;

            let total_closing = 0;
            for(let i=1; i<=12; i++) {
                let addVal = 0;
                if(isEdit) addVal = parseInt( $(`#add_${key}_${i}`).val() );
                else addVal = parseInt( $(`#add_${key}_${i}`).text() );

                let cancellationVal = 0;
                if(isEdit) cancellationVal = parseInt( $(`#cancellation_${key+1}_${i}`).val() ) || 0;
                else cancellationVal = parseInt( $(`#cancellation_${key+1}_${i}`).text() ) || 0;

                if(i > 1) { 
                    if(isEdit) openingVal = parseInt( $(`#closing_${key+2}_${i-1}`).val() ) || 0;
                    else openingVal = parseInt( $(`#closing_${key+2}_${i-1}`).text() ) || 0;
                }

                let closingVal = (openingVal + addVal - cancellationVal) || 0;
                
                if(isEdit) $(`#closing_${key+2}_${i}`).val(closingVal);
                // else $(`#closing_${key+2}_${i}`).text(closingVal);
                else (closingVal > 0) ? $(`#closing_${key+2}_${i}`).text(closingVal) : $(`#closing_${key+2}_${i}`).text('-');

                calculateTotalClosing(key);
            }            
        }

        function calculateClosingForCancellation(key){
            let openingVal = 0;
            if(isEdit) openingVal = parseInt( $(`#opening_${key+1}`).val() ) || 0;
            else openingVal = parseInt( $(`#opening_${key+1}`).text() ) || 0;

            let total_closing = 0;
            for(let i=1; i<=12; i++) {
                let addVal = 0;
                if(isEdit) addVal = parseInt( $(`#add_${key-1}_${i}`).val() );
                else addVal = parseInt( $(`#add_${key-1}_${i}`).text() );

                let cancellationVal = 0;
                if(isEdit) cancellationVal = parseInt( $(`#cancellation_${key}_${i}`).val() ) || 0;
                else cancellationVal = parseInt( $(`#cancellation_${key}_${i}`).text() ) || 0;

                if(i > 1) { 
                    if(isEdit) openingVal = parseInt( $(`#closing_${key+1}_${i-1}`).val() ) || 0;
                    else openingVal = parseInt( $(`#closing_${key+1}_${i-1}`).text() ) || 0;
                }

                let closingVal = (openingVal + addVal - cancellationVal) || 0;
                
                if(isEdit) $(`#closing_${key+1}_${i}`).val(closingVal);
                else (closingVal > 0) ? $(`#closing_${key+1}_${i}`).text(closingVal) : $(`#closing_${key+1}_${i}`).text('-');

                calculateTotalClosing(key);
            }            
        }

        function calculateTotalClosing(key){            
            let openingVal = 0;
            if(isEdit) openingVal = parseInt( $(`#opening_${key}`).val() ) || 0; 
            else openingVal = parseInt( $(`#opening_${key}`).text() ) || 0; 

            let total_addVal = 0;
            if(isEdit) total_addVal = parseInt( $(`#total_add_${key}`).val() ) || 0; 
            else total_addVal = parseInt( $(`#total_add_${key}`).text() ) || 0; 

            let total_cancellationVal = 0;
            if(isEdit) total_cancellationVal = parseInt( $(`#total_cancellation_${key}`).val() ) || 0;
            else total_cancellationVal = parseInt( $(`#total_cancellation_${key}`).text() ) || 0;

            let total_closingVal = (openingVal + total_addVal - total_cancellationVal) || 0;

            if(isEdit) $(`#total_closing_${key}`).val(total_closingVal);  
            else (total_closingVal > 0) ? $(`#total_closing_${key}`).text(total_closingVal) : $(`#total_closing_${key}`).text('-');  
        }


        function calculateGrandTotal(){            
            let gtotalOpeningVal = 0;       
            
            budgetKeys.forEach(key => {            
                if(isEdit) gtotalOpeningVal += parseInt( $(`#opening_${key}`).val() ) || 0; 
                else gtotalOpeningVal += parseInt( $(`#opening_${key}`).text() ) || 0;
            });
            
            $(`#totalOpening`).text(gtotalOpeningVal);
            let totalOpeningVal = parseInt( $(`#totalOpening`).text() ) || 0; 

            let gTotalAdd = 0; 
            let gTotalCancellation = 0; 
            let gTotalClosing = 0; 
            
            for(let i=1; i<=12; i++) {

                if(i > 1) totalOpeningVal = parseInt( $(`#gTotal_closing_${i-1}`).text() ) || 0;

                let totaladd = 0;
                let totalCancellation = 0;
                let totalClosing = 0;

                budgetKeys.forEach( (key, index) => {
                    let addVal = 0
                    if(isEdit) addVal = parseInt( $(`#add_${key}_${i}`).val() ) || 0;
                    else addVal = parseInt( $(`#add_${key}_${i}`).text() ) || 0;
                    totaladd += addVal;

                    let cancellationVal = 0;
                    if(isEdit) cancellationVal = parseInt( $(`#cancellation_${key+1}_${i}`).val() ) || 0;
                    else cancellationVal = parseInt( $(`#cancellation_${key+1}_${i}`).text() ) || 0;
                    totalCancellation += cancellationVal;
                });
                
                totalClosing = totalOpeningVal + totaladd - totalCancellation;

                (totaladd > 0) ? $(`#gTotal_add_${i}`).text(totaladd) : $(`#gTotal_add_${i}`).text('-');
                (totalCancellation > 0) ? $(`#gTotal_cancellation_${i}`).text(totalCancellation) : $(`#gTotal_cancellation_${i}`).text('-');
                (totalClosing > 0) ? $(`#gTotal_closing_${i}`).text(totalClosing) : $(`#gTotal_closing_${i}`).text('-');    
                            
                gTotalAdd += totaladd;
                gTotalCancellation += totalCancellation;
            }

            gTotalClosing = gtotalOpeningVal + gTotalAdd - gTotalCancellation;

            $(`#gTotalAdd`).text(gTotalAdd);
            $(`#gTotalCancellation`).text(gTotalCancellation);
            $(`#gTotalClosing`).text(gTotalClosing);
        }




        // SUBMIT
        $('#budget-form').submit(function( event ) {
            event.preventDefault();        
            let csrf = "{{csrf_token()}}";
            let serializeValue=$(this).serialize();
            let budgetType = "{{ $budgetType }}";
            
            formData = new FormData();
            formData.append('_token', csrf);
            formData.append('budgetType', budgetType);
            formData.append('serializeValue', serializeValue);
                        
            $.ajax({
                processData: false,
                contentType: false,
                type: 'post',
                url: './update',
                data: formData,
                dataType: 'json',
                success: function( data ){
                    if (data.responseTitle=='Success!') { 
                        toastr.success(data.responseText, data.responseTitle, opts);
                        setTimeout(() => { window.location.href = '{{url('misYearlyBudget/view')}}' }, 1000); 
                    }
                    if (data.responseTitle=='Warning!') toastr.warning(data.responseText, data.responseTitle, opts); 
                },
                error: function( data ){
                    console.log(data);
                }
            });

        });
        // END OF SUBMIT



    }); // ready function end
</script>

{{-- // print  --}}
<script type="text/javascript">
    $("#printIcon").click(function(event) {

        var printStyle = '<style>#reportingTable{float:left;height:auto;padding:0px;width:100%;font-size:11px;border:1pt solid ash;page-break-inside:auto;font-family: arial!important;} thead tr th{ text-align:center;vertical-align: middle;padding:3px;font-size:11px;} tbody tr td { text-align:right;vertical-align: middle;padding:3px ;font-size:10px;} tr{ page-break-inside:avoid; page-break-after:auto }tbody tr td:nth-child(2){text-align:left !important;} tbody tr td:nth-child(3){text-align:left !important;}tbody tr td:nth-child(1){text-align:center !important;}tbody tr.singleRow td:nth-child(1){text-align:left !important;}table tbody tr.subTotalData td:nth-child(1){ font-weight: bold !important;text-align:center !important;}table tbody tr.subTotalData td:nth-child(2){ font-weight: bold !important;text-align:center !important;}table tbody tr.subTotalData td:nth-child(2){ text-align:right!important;font-weight: bold;!important}table tbody tr.subTotalData td:nth-child(3),table tbody tr.subTotalData td:nth-child(4),table tbody tr.subTotalData td:nth-child(5){ text-align:right!important;font-weight: bold;!important} </style>   <style media="print">@page{size:portrait;margin:10mm 10mm;}</style><style>@media print {.element-that-contains-table { overflow: visible !important; }}</style><style>@page:first{tr:nth-of-type(4n){page-break-after: always;}}</style>';

        var mainContentsUpper = document.getElementById("printDivUpper").innerHTML;
        var mainContents1 = document.getElementById("printDiv1").innerHTML;
        var headerContents = '';
        var footerContents = "<div class='row' style='font-size:12px; padding-left:5px; padding-top:20px;'>Prepared By <span style='display:inline-block; width: 35%; padding-top:40px;'></span> Checked By <span style='display:inline-block; width: 34%; padding-right:15px; padding-top:40px;'></span>Approved By</div>";

        var printContents = '<div id="order-details-wrapper"  style="padding: 10px;">' + headerContents + mainContentsUpper+printStyle+'<div>'+mainContents1+'</div>'+footerContents;


        var win = window.open('','printwindow');
        win.document.write(printContents);
        win.print();
        win.close();
    });
</script>


@endsection