@extends('layouts.app')

@section('content')
<article class="pageTitleSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_118px__wr">
        <div class="pageTitleWrap__wr">
            <span class="icon__wr d-inline-flex"><img src="{{ asset('assets/frontend/images/mortage-compare-icon.png') }}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="30" height="30"></span>
            <h2 class="pageTitle__wr">Buyout Calculator</h2>
        </div>
    </div>
</article>
<article class="CardBoxSec__wr buyoutCalCardBoxSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_100px__wr">
        <div class="card card-body pageMainCardBox__wr">
            <!-- <form class="formBlock__wr buyoutCalFormBlock__wr" action="">
                <div class="buyoutCalInptGrpWrap__wr">
                    <div class="row spaceInner_lg_x_20px__wr">
                        <div class="form-group col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12 crntLoanInptFrmGrp__wr">
                            <label class="form-label">Current Loan Outstanding</label>
                            <div class="input-group buyoutCalInptGrp__wr curntLoanInptGrp__wr">
                                <button class="btn btn-outline-primary primaryOutlineBtn__wr hoverPrimaryBtn__wr buyCalInptGrpMinsBtn__wr" type="button"><i class="fa-solid fa-minus"></i></button>
                                <input type="text" class="form-control buyCalInptGrpformCtrl__wr" placeholder="" aria-label="Example text with two button addons">
                                <button class="btn btn-outline-secondary secondaryOutlineBtn__wr hoverSecondaryBtn__wr buyCalInptGrpPlusBtn__wr" type="button"><i class="fa-solid fa-plus"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </form> -->
            <div class="row spaceInner_lg_x_50px__wr">
                <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12 mx-auto" id="calculation_col">
                    <form class="formBlock__wr mortageCalFormBlock__wr" action="">
                        <div class="row spaceInner_lg_x_22px__wr">
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 loanAmountInput__wr">
                                <label class="form-label">Current Loan Outstanding</label>
                                <input type="text" name="outstanding" id="outstanding" class="form-control autonumeric" value="500000" placeholder="Enter here">
                            </div>
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 loanAmountRange__wr">
                                <div class="sliderRange__wr_outstanding primarySliderRange__wr"></div>
                            </div>
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 intrstRateInput__wr">
                                <label class="form-label">Current Mortgage Rate <small class="text-muted">(in %)</small></label>
                                <input type="text" name="interest_rate" id="interest_rate" value="3.00" class="form-control" placeholder="Enter here">
                            </div>
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 intrstRateRange__wr">
                                <div class="sliderRange__wr_interestrate darkSliderRange__wr"></div>
                            </div>
                            <div class="form-group col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 tenuretMonthInput__wr">
                                <label class="form-label">Remaining Tenor  <small class="text-muted">(in months)</small></label>
                                <input type="text" name="tenor_month" id="tenor_month" class="form-control" placeholder="Enter here" value="60">
                            </div>
                            <div class="form-group col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 tenuretYearInput__wr">
                                <label class="form-label">Remaining Tenor <small class="text-muted">(in years)</small></label>
                                <input type="text" name="tenor_year" id="tenor_year" class="form-control" placeholder="Enter here" value="5" disabled>
                            </div>
                            
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 tenureRange__wr">
                                <div class="sliderRange__wr_tenor secondarySliderRange__wr"></div>
                            </div>
                            @if(\Auth::check() && hasAdminRmAccess())
                            <div class="form-group col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                <div class="row">
                                    <div class="col-12">
                                        <select name="select_bank" id="select_products" class="form-control rns-selectpicker border" multiple data-max-options="2" data-live-search="true">
                                            @if($products_for_team_selection->isNotEmpty())
                                                @foreach ($products_for_team_selection as $product)
                                                    <option value="{{$product->id}}" {{in_array($product->id, $default_products->pluck('id')->toArray()) ? 'selected' : ''}}>{{$product->bank->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                    <div class="col-12 mt-5" id="selected_banks">
                                        <table class="table table-bordered">
                                            <tbody>
                                                @if($default_products->isNotEmpty())
                                                    @foreach ($default_products as $product)
                                                        <tr>
                                                            <td>{{ $product->bank->name }}</td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <div class="form-group btnParent__wr col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 ">
                                <button type="button" class="btn btn-outline-primary primaryOutlineBtn__wr hoverSecondaryOutlineBtn__wr btn_sm__wr">
                                    <span class="labelText__wr" id="compare_btn">COMPARE MORTGAGE</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12" id="result_col">
                    <div class="row spaceInner_lg_x_30px__wr">
                        <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                            
                            <div class="bank_data" id="bank_data" style="font-size:14px">
                                
                            </div>
                            
                        </div>
                        <!-- <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="figureBlock__wr chartFigureBlock__wr">
                                <picture class="figure__wr chartFigure__wr">
                                    <img src="{{ asset('assets/frontend/images/mortage-calculator-chart-bg.svg') }}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="" height="">
                                </picture>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
@endsection

@section('script')
<script type="text/javascript">

    
    $(document).ready(function(){
        $('#result_col').hide();
        @php
            $productsJson = json_encode($default_products);
        @endphp
        var products = {!! $productsJson !!}; 
        output(products);
        $('#compare_btn').click(function(){
            products = getProducts($('#select_products'));
            // console.log(products);
            // return;
            // output(products);
            if($('#calculation_col').hasClass('mx-auto')){
                $('#calculation_col').removeClass('mx-auto');
                $('#result_col').slideDown('slow');
            }
        })
        
        function getProducts(selected){
            var selectedProductIds = selected.val();
            if (selectedProductIds.length === 0) {
                alert("Please select at least one product.");
                return;
            }
            var products = '';
            $.ajax({
                url: "{{ route('get.products') }}",
                type: "GET",
                data: {_token: '{{csrf_token()}}', ids: selectedProductIds },
                success: function(response) {
                    if(response.success) {
                        products = response.products;
                        output(products);
                        return true;
                    } else {
                        alert("Failed to fetch product details.");
                    }
                },
                error: function(xhr) {
                    console.error("AJAX Error:", xhr.responseText);
                    return false;
                }
            });
        }
        $( ".sliderRange__wr_outstanding" ).slider({
            range: "min",
            value: 500000,
            //min: 100000,
            max: 100000000,
            step: 1,
            change: function(event, ui) {
                const autoNumericInstance = new AutoNumeric("#outstanding", {
                    decimalPlaces: 2,
                    digitGroupSeparator: ",",
                    currencySymbol: "",
                    unformatOnSubmit: true
                });
                autoNumericInstance.set(String(ui.value));
            }
        });

        $( ".sliderRange__wr_outstanding" ).on( "slidechange", function( event, ui ) {
            $('#outstanding').val(ui.value);
            // new AutoNumeric.set('#outstanding', ui.value);
            // var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
            
        });

        $(document).on('focusout', "#outstanding", function(){
            var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
            $( ".sliderRange__wr_outstanding" ).slider( "option", "value", outsanding);
            
        });

        $( ".sliderRange__wr_interestrate" ).slider({
            range: "min",
            value: 3,
            //min: 100000,
            max: 20,
            step: 0.01
        });

        $( ".sliderRange__wr_interestrate" ).on( "slidechange", function( event, ui ) {
            $('#interest_rate').val(ui.value.toFixed(2));
            //var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
        });

        $("#interest_rate").keyup(function(){
            $( ".sliderRange__wr_interestrate" ).slider( "option", "value", $("#interest_rate").val().toFixed(2) );
            //var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
        });

        $( ".sliderRange__wr_tenor" ).slider({
            range: "min",
            value: 60,
            max: 360,
            step: 1
        });

        $( ".sliderRange__wr_tenor" ).on( "slidechange", function( event, ui ) {
            $('#tenor_month').val(ui.value);
            let years = ui.value / 12;
            $('#tenor_year').val(years.toFixed(2));
            //var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
        });

        $("#tenor_month").keyup(function(){
            $( ".sliderRange__wr_tenor" ).slider( "option", "value", $("#tenor_month").val() );
            //var outsanding = parseInt( $.trim($("#outstanding").val()).replace(/,/g,''));
        });

        $('.mortageCalTableToggle__wr').click(function(){
            var tagid = $(this).data('tag');
            $('.mortageCalTableCollapse__wr').removeClass('active');
            $('.mortageCalInnerTableWrap__wr').slideUp("slow");
            var tagIdTableData = $(this).parent().parent().next().children().children('div');
            tagIdTableData.slideDown("slow");
        });
        
    });
        
    function output(products){
        var principal_outstanding_3yrs_existing = 0;
        var principal_outstanding_5yrs_existing = 0;
        var total_interest_3yrs_existing = 0;
        var total_interest_5yrs_existing = 0;
        var esp = 0;  
        // total loan amount value entered by user/mortgage advisor
        var mcTotalLoanAmount = initialTotalLoanAmount = parseInt( $.trim($("#outstanding").val()).replace(/,(?=.*\.\d+)/g, '') );

        /** early settlement penalty */
        esp = ( mcTotalLoanAmount * 1 ) / 100; // 1% of loan amount
        esp = esp > 10000 ? 10000 : esp; // 1% of loan amount or 10,000 whichever is less

        // rate (if fixed) value entered by user/mortgage advisor
        var mcRateIfFixed = parseFloat( $.trim($("#interest_rate").val()) );

        // remaining tenor value entered by user/mortgage advisor
        var remaining_tenor_master = remaining_tenor = parseInt( $.trim($("#tenor_month").val()) ); 

        
        // current base rate/eibor value entered by mortgage advisor or default value
        var current_base_rate_eibor = parseFloat( "{{get_setting('current_rate_base_eibor')}}" );  /** Fix_rate_period and insurance_cost and margin get to products and banks*/
        var margin                  = parseFloat( "{{get_setting('cal_margin')}}" );
        var rate_fixed              = mcRateIfFixed;
        var fixed_rate_period       = parseInt( "{{get_setting('cal_fix_rate_period')}}" );
        var insurance_cost          = parseFloat( "{{get_setting('insurance_cost')}}" );

        
        // var total_roi_cal = total_roi( fixed_rate_period, current_base_rate_eibor, margin, rate_fixed, insurance_cost);
        var total_roi_cal = mcRateIfFixed;
        var emi_cal = emi( total_roi_cal, remaining_tenor, mcTotalLoanAmount);
        // var emi_cal = temp_function_emi(mcTotalLoanAmount, total_roi_cal, remaining_tenor);
        
        /**Put Value on frontend */
        $('#existing_loan_amount').children().text(number_format(mcTotalLoanAmount));
        $('#existing_monthly_installments').children().text(number_format(emi_cal));
        $('#existing_tenor').children().text(remaining_tenor);

        /** total_roi_cal after fixed rate period */
        var rate_after_frp = current_base_rate_eibor + margin;
        // var total_roi_cal_frp = total_roi( 0, current_base_rate_eibor, margin, rate_after_frp, insurance_cost );
        var total_roi_cal_frp = total_roi_cal; //Afzal Testing
        var total_loan_amouont = mcTotalLoanAmount;
        var opening_cal = total_loan_amouont;
        var interest_sum = 0;

        for(let i = 1;  i <= 60; i++ ){ //remaining_tenor =>60

            if( i > (fixed_rate_period * 12) ){
                total_roi_cal = total_roi_cal_frp;
            }

            /** changing total_loan_amount and EMI every year */
            if( i == 13 || i == 25 || i == 37 || i == 49 ){
                
                /** decrease remaining tenor by 12 after a year */
                remaining_tenor = remaining_tenor - 12;

                /** outstanding loan amount after a year */
                total_loan_amouont = opening_cal;

                /** EMI calculation after a year */
                emi_cal = emi( total_roi_cal, remaining_tenor, total_loan_amouont);
            }

            let interest_cal = interest( opening_cal, total_roi_cal );

            interest_sum += interest_cal;

            let principal_cal = principal(i, remaining_tenor, emi_cal, interest_cal);
            let closing_cal = opening_cal - principal_cal;

            /** calculaton after 3yrs */
            if(i == 36){
                /** total interest in 3yrs */
                total_interest_3yrs_existing = interest_sum;
                /** principal_outstanding in 3yrs */
                principal_outstanding_3yrs_existing = closing_cal;
            }

            /** calculaton after 5yrs */
            if(i == 60){
                /** total interest in 5yrs */
                total_interest_5yrs_existing = interest_sum;

                /** principal_outstanding in 5yrs */
                principal_outstanding_5yrs_existing = closing_cal;
            }
            opening_cal = closing_cal;

        }
        console.log('emi: '+emi_cal);

        /** Temp php code for testing, write in controller after testing */ 
        
        // var products = {!! $productsJson !!}; 
        // var emi_cal = emi( total_roi_cal, remaining_tenor, total_loan_amouont);
        var index = 0;
        var charges_fees = {};
        //var final_data = new Array();
        var html = bank_name_html = loan_outstanding_html = monthly_installment_html = total_saving_3y_html = total_saving_5y_html = mortgage_registration_fee_html = trustee_fee_html = processing_fee_html = valuation_fee_html = total_fee_html = net_saving_5y_html = remaining_tenor_html = '';
        
        $.each(products, function(k, v){
            var trustee_office = 4200; //Need TO ask client for adding value in product
            var remaining_tenor = remaining_tenor_master;
            var total_loan_amouont = mcTotalLoanAmount+esp;
            var current_base_rate_eibor = 0.00;
            var margin = v.margin;
            var rate_fixed        = v.interest_rate_int;
            var fixed_rate_period = v.fix_rate_period;
            var insurance_cost = v.bank.insurance_cost; 
            // console.log('remaining_tenor: '+ remaining_tenor + ', total_loan_amouont: '+ total_loan_amouont + ',current_base_rate_eibor: '+ current_base_rate_eibor + ',margin: '+ margin + ',rate_fixed: '+ rate_fixed + ',fixed_rate_period: '+ fixed_rate_period + ', insurance_cost: '+ insurance_cost);
            var total_roi_cal = total_roi( fixed_rate_period, current_base_rate_eibor, margin, rate_fixed, insurance_cost);
            /** monthly installment */
            var emi_cal = emi( total_roi_cal, remaining_tenor, total_loan_amouont);
            var emi_cal_output = emi_cal;
            /** total_roi_cal after fixed rate period */
            var rate_after_frp = current_base_rate_eibor + margin;
            var total_roi_cal_frp = total_roi( 0, current_base_rate_eibor, margin, rate_after_frp, insurance_cost );

            var opening_cal = total_loan_amouont;
            var interest_sum = 0;

            var total_savings_in_3yrs = 0;
            var total_savings_in_5yrs = 0;
            var saving_for_5years = 0;
            var saving_for_3years = 0;
            for(let i = 1;  i <= 60; i++ ){ //remaining_tenor =>60


                if( i > (fixed_rate_period * 12) ){
                    total_roi_cal = total_roi_cal_frp;
                }

                /** changing total_loan_amount and EMI every year */
                if( i == 13 || i == 25 || i == 37 || i == 49 ){
                    
                    /** decrease remaining tenor by 12 after a year */
                    remaining_tenor = remaining_tenor - 12;

                    /** outstanding loan amount after a year */
                    total_loan_amouont = opening_cal;

                    /** EMI calculation after a year */
                    emi_cal = emi( total_roi_cal, remaining_tenor, total_loan_amouont);
                }
                    

                let interest_cal = interest( opening_cal, total_roi_cal );

                interest_sum += interest_cal;

                let principal_cal = principal(i, remaining_tenor, emi_cal, interest_cal);
                let closing_cal = opening_cal - principal_cal;

                /** calculaton after 3yrs */
                if(i == 36){
                    /** total interest in 3yrs */
                    // labels[3].value.push(Math.round(interest_sum));

                    /** total savings in 3yrs */
                    let total_savings_in_3yrs = ( total_interest_3yrs_existing - interest_sum ) + (principal_outstanding_3yrs_existing - closing_cal);
                    saving_for_3years = total_savings_in_3yrs;
                    // labels[4].value.push(Math.round(total_savings_in_3yrs));
                }

                /** calculaton after 5yrs */
                if(i == 60){
                    /** total interest in 5yrs */
                    // labels[5].value.push(Math.round(interest_sum));

                    /** total savings in 5yrs */
                    total_savings_in_5yrs = ( total_interest_5yrs_existing - interest_sum ) + (principal_outstanding_5yrs_existing - closing_cal);
                    saving_for_5years =  total_savings_in_5yrs;
                    // labels[7].value.push(Math.round(total_savings_in_5yrs));
                }

                // $amortization_schedule_table_body += '<tr class="' + ( ( i % 12 == 0 ) ? 'highlight': '' ) + '">';
                //     $amortization_schedule_table_body += '<th>' + i + '</th>';
                //     $amortization_schedule_table_body += '<td>' + number_format(Math.round(opening_cal)) + '</td>';
                //     $amortization_schedule_table_body += '<td>' + number_format(Math.round(interest_cal)) + '</td>';
                //     $amortization_schedule_table_body += '<td>' + number_format(Math.round(principal_cal)) + '</td>';
                //     $amortization_schedule_table_body += '<td>' + number_format(Math.round(closing_cal)) + '</td>';
                // $amortization_schedule_table_body += '</tr>';


                opening_cal = closing_cal;

            }
            
            index = index+=1;
            product_name = 'Option ';
            @if(Auth::check())
                product_name = v.bank.name;
            @else
                product_name = product_name + index;
            @endif
            /** preparing movement cost data for movement table */
            /** early settlement penalty */
            // let esp = ( initialTotalLoanAmount * 1 ) / 100; // 1% of loan amount
            // esp = esp > 10000 ? 10000 : esp; // 1% of loan amount or 10,000 whichever is less
            // // labels_movement[0].value.push(Math.round(esp));
            // charges_fees.esp = Math.round(esp)

            /** Mortgage registration fee */
            let mr = ( ( initialTotalLoanAmount * 0.25 ) / 100 ) + 1500; // 0.25% of loan amount + 1500
            charges_fees.mr = Math.round(mr);
            // /** Trustee fee */
            charges_fees.trustee_office = Math.round(trustee_office);
            /** processing fee */
            let pf = ( initialTotalLoanAmount * v.buyout_fee_int ) / 100;
            charges_fees.pf = Math.round(pf)

            /** Valuation fee */
            charges_fees.valuation_fee = Math.round(v.property_valuation_fee_int);
            /** Total movement cost */
            let total_movement_cost = mr + trustee_office + pf +  charges_fees.valuation_fee;
            charges_fees.total_cost = Math.round( total_movement_cost )

            /** Net savings in 5 yrs */
            charges_fees.net_savings_5yrs = Math.round(saving_for_5years)  - charges_fees.total_cost ;

            // final_data.push({
            //     'name': product_name.toUpperCase(),
            //     'outstanding': number_format(Math.round(mcTotalLoanAmount+esp)),
            //     'monthly_installment': number_format(Math.round(emi_cal_output)),
            //     'remaining_tenor': Math.round(remaining_tenor),
            //     'total_saving_3y': number_format(Math.round(saving_for_3years)),
            //     'total_saving_5y': number_format(Math.round(saving_for_5years)),
            //     'mortgage_registration_fee': number_format(charges_fees.mr),
            //     'trustee_fee': number_format(charges_fees.trustee_office),
            //     'processing_fee': number_format(charges_fees.pf),
            //     'valuation_fee': number_format(charges_fees.valuation_fee),
            //     'total_fee': number_format(charges_fees.total_cost),
            //     'net_saving_5y': number_format(charges_fees.net_savings_5yrs)
            // });

            bank_name_html += '<th scope="col">' + product_name.toUpperCase() + '</th>';
            loan_outstanding_html += '<td>' + number_format(Math.round(mcTotalLoanAmount+esp)) + '</td>';
            monthly_installment_html += '<td>' + number_format(Math.round(emi_cal_output)) + '</td>';
            total_saving_3y_html += '<td>' + number_format(Math.round(saving_for_3years)) + '</td>';
            total_saving_5y_html += '<td>' + number_format(Math.round(saving_for_5years)) + '</td>';
            mortgage_registration_fee_html += '<td>' + number_format(Math.round(charges_fees.mr)) + '</td>';
            trustee_fee_html += '<td>' + number_format(Math.round(charges_fees.trustee_office)) + '</td>';
            processing_fee_html += '<td>' + number_format(Math.round(charges_fees.pf)) + '</td>';
            valuation_fee_html += '<td>' + number_format(Math.round(charges_fees.valuation_fee)) + '</td>';
            total_fee_html += '<td>' + number_format(Math.round(charges_fees.total_cost)) + '</td>';
            net_saving_5y_html += '<td>' + number_format(Math.round(charges_fees.net_savings_5yrs)) + '</td>';
            remaining_tenor_html += '<td>' + remaining_tenor_master + '</td>';

            //html += '<div class="mortageCalValueData__wr">'; 
                //html += '<h6>'+product_name+'</h6>'; 
                //html += '<div class="calValData__wr emiCalValData__wr">Loan Outstanding:<span>'+ number_format(Math.round(mcTotalLoanAmount+esp)) +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Monthly Installment:<span>'+ number_format(Math.round(emi_cal_output)) +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Remaining Tenor:<span>'+ Math.round(remaining_tenor) +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Total Savings in 3 years:<span>'+ number_format(Math.round(saving_for_3years)) +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr mb-3">Total Savings in 5 years:<span>'+ number_format(Math.round(saving_for_5years)) +'</span></div>';
                //html += '<span class="text-muted fs-12"> Charges and Fees </span>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Mortgage Registration:<span>'+ charges_fees.mr +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Trustee Office:<span>'+ charges_fees.trustee_office +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Processing Fee:<span>'+ charges_fees.pf +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr">Valuation Fee:<span>'+ charges_fees.valuation_fee +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr text-success">Total Fees and Charges*<span>'+ charges_fees.total_cost +'</span></div>';
                //html += '<div class="calValData__wr prAmtCalValData__wr text-success">Net savings in 5 yrs<span>'+ charges_fees.net_savings_5yrs +'</span></div>';
            //html+= '</div>';

        });

        html += '<table class="table table-responsive caption-top">';
                                    html += '<caption>Buyout Calculation</caption>';
                                    html += '<thead>';
                                       html += '<tr class="table-dark">';
                                            html += '<th scope="col"></th>';
                                            html += '<th scope="col">EXISTING MORTGAGE</th>';
                                            html += bank_name_html;
                                        html += '</tr>';
                                    html += '</thead>';
                                    html += '<tbody>';
                                        html += '<tr>';
                                            html += '<th scope="row">Loan Outstanding</th>';
                                            html += '<td>AED '+ number_format(Math.round(mcTotalLoanAmount)) +'</td>';
                                            html += loan_outstanding_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Monthly Installment</th>';
                                            html += '<td>AED '+ number_format(Math.round(emi_cal)) +'</td>';
                                            html += monthly_installment_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Remaining Tenor</th>';
                                            html += '<td>' + remaining_tenor_master + '</td>';
                                            html += remaining_tenor_html;
                                        html += '</tr>';
                                        html += '<tr class="table-info">';
                                            html += '<th scope="row">Total Savings in 3 years</th>';
                                            html += '<td></td>';
                                            html += total_saving_3y_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row"></th>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                        html += '</tr>';
                                        html += '<tr class="table-info">';
                                            html += '<th scope="row">Total Savings in 5yrs</th>';
                                            html += '<td></td>';
                                            html += total_saving_5y_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row"></th>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                        html += '</tr>';
                                        html += '<tr class="table-dark">';
                                            html += '<th scope="col">CHARGES and FEES</th>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Mortgage Registration</th>';
                                            html += '<td></td>';
                                            html += mortgage_registration_fee_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Trustee Office</th>';
                                            html += '<td></td>';
                                            html += trustee_fee_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Buyout Fee</th>';
                                            html += '<td></td>';
                                            html += processing_fee_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row">Valuation Fee</th>';
                                            html += '<td></td>';
                                            html += valuation_fee_html;
                                        html += '</tr>';
                                        html += '<tr class="table-warning">';
                                            html += '<th scope="row">Total Fees and Charges*</th>';
                                            html += '<td></td>';
                                            html += total_fee_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<th scope="row"></th>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                            html += '<td></td>';
                                        html += '</tr>';
                                        html += '<tr class="table-success">';
                                            html += '<th scope="row">Net Savings in 5 yrs</th>';
                                            html += '<td></td>';
                                            html += net_saving_5y_html;
                                        html += '</tr>';
                                        html += '<tr>';
                                            html += '<td colspan="4" class="text-muted"><em><small>* Total movemet cost excludes early settlement cost which will not be paid by you but rather part of the loan with the new Bank.</em></small></td>';
                                        html += '</tr>';
                                    html += '</tbody>';
                                html += '</table>';
        $('#bank_data').html(html)// for testing purpose, remove after testing
        
        
    }

    
    /** total ROI calculator */
    function total_roi($frp, $cbreibor, $margin, $roi, $ic){
        if($frp == 0)
            return $cbreibor + $margin + $ic; // p.a.
        return $roi + $ic; // p.a.
    }

    /** EMI calculator */
    function emi($troi, $rt, $tla){
        // return $tla * ($troi / 1200) * ( (Math.pow(1+($troi / 1200), ($rt)))) / ((Math.pow(1+($troi / 1200), ($rt))) -1 ); 

        var $emi = ( $tla * ( $troi / 1200 ) * Math.pow( ( 1 + ( $troi / 1200 ) ), $rt) ) / ( Math.pow( ( 1 + ( $troi / 1200 ) ), $rt) - 1 );
        return $emi;

    } 

    // function calculateEMI(principal, annualRate, tenureMonths) {
    //     let monthlyRate = annualRate / 12 / 100; // Convert annual rate to monthly rate
    //     let emi = (principal * monthlyRate * Math.pow(1 + monthlyRate, tenureMonths)) / 
    //             (Math.pow(1 + monthlyRate, tenureMonths) - 1);
    //     return emi.toFixed(2); // Round to 2 decimal places
    // }

    //     // Example Usage
    //     let principal = 500000;  // Loan amount
    //     let annualRate = 7.5;    // Annual interest rate in percentage
    //     let tenureMonths = 60;   // Loan tenure in months

    //     console.log("EMI: ₹" + calculateEMI(principal, annualRate, tenureMonths));

    /** monthly interest calculator */
    function interest($opening, $total_roi){
        return $opening * ( $total_roi / 1200 );
    }

    /** monthly principal amount calculator */
    function principal($current_month_no, $rt, $emi, $interest){
        if( $current_month_no > ($rt * 12) )
            return 0;
        return $emi - $interest;
    }

    function number_format (number, prec=2) {
          
          number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
          var n = !isFinite(+number) ? 0 : +number
          var sep = ',' ;
          var dec = '.';
          var s = '';
  
          var toFixedFix = function (n, prec) {
              var k = Math.pow(10, prec)
              return '' + (Math.round(n * k) / k)
                  .toFixed(prec)
          }
  
          s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
          if (s[0].length > 3) {
              s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
          }
          if ((s[1] || '').length < prec) {
              s[1] = s[1] || ''
              s[1] += new Array(prec - s[1].length + 1).join('0')
          }
  
          return s.join(dec)
      }
</script>
@endsection