@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-calculator-icon.png') }}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="30" height="30"></span>
            <h2 class="pageTitle__wr">Mortgage Calculator</h2>
        </div>
    </div>
</article>
<article class="CardBoxSec__wr mortageCalCardBoxSec__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">
            <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">Loan Amount</label>
                                <input type="text" name="loan_amount" id="loan_amount" value="20000000" class="form-control autonumeric" 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_loanamount 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">Interest Rate (% p.a.)</label>
                                <input type="text" name="interest_rate" id="interest_rate" value="10" 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 tenuretYearInput__wr">
                                <label class="form-label">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="10">
                            </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">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="120" 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>
                            <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" id="calculate_btn">
                                    <span class="labelText__wr">CALCULATE</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-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                            <div class="mortageCalValueData__wr">
                                <div class="calValData__wr emiCalValData__wr">Monthly EMI:<span id="monthly_emi_result"></span></div>
                                <div class="calValData__wr prAmtCalValData__wr">Principal Amount:<span id="prinicipal_amount_result"></span></div>
                                <div class="calValData__wr insAmtCalValData__wr">Interest Amount:<span id="interest_rate_result"></span></div>
                                <div class="calValData__wr ttlAmtCalValData__wr">Total Payable:<span id="total_payable_result"></span></div>
                            </div>
                            <ul class="chartIndicator__wr">
                                <li class="chartLabel__wr prAmtChartLabel__wr">Principal Amount</li>
                                <li class="chartLabel__wr insAmtChartLabel__wr">Interest Amount</li>
                                <li class="chartLabel__wr ttlAmtChartLabel__wr">Total Amount Payable</li>
                            </ul>
                        </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">
                                <canvas id="myChart"></canvas>
                                <!-- <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 class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12" id="table_result">
                    <div class="mortageCalDataTableSec__wr">
                        <div class="table-responsive">
                            <table class="mortageCalDataTable__wr">
                                <thead>
                                    <tr>
                                        <th class="w_lg_8_per__wr">Year</th>
                                        <th>Opening Balance</th>
                                        <th>EMI</th>
                                        <th>Interest Paid</th>
                                        <th>Principal Paid</th>
                                        <th>Closing Balance</th>
                                    </tr>
                                </thead>
                                <tbody id="amortization_table"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#result_col').hide();
        $('#table_result').hide();
        $('#calculate_btn').click(function(){
            if($('#calculation_col').hasClass('mx-auto')){
                $('#calculation_col').removeClass('mx-auto');
                $('#result_col').slideDown('slow');
                $('#table_result').slideDown('slow');
                $(this).hide();
            }
        })
        amort(20000000, 10/100, 120);
        
        $( ".sliderRange__wr_loanamount" ).slider({
            range: "min",
            value: 20000000,
            //min: 100000,
            max: 100000000,
            step: 1
        });

        
        $( document ).on( "slidechange", ".sliderRange__wr_loanamount", function( event, ui ) {
            $('#loan_amount').val(ui.value);
            AutoNumeric.set('#loan_amount', ui.value);
            amort(ui.value, $("#interest_rate").val()/100, $("#tenor_year").val() * 12);
        });

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

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

        $( ".sliderRange__wr_interestrate" ).on( "slidechange", function( event, ui ) {
            $('#interest_rate').val(ui.value);
            var loan_amount = parseInt( $.trim($("#loan_amount").val()).replace(/,/g,''));
            amort(loan_amount, $("#interest_rate").val()/100, $("#tenor_year").val() * 12);
        });

        $("#interest_rate").keyup(function(){
            $( ".sliderRange__wr_interestrate" ).slider( "option", "value", $("#interest_rate").val() );
            var loan_amount = parseInt( $.trim($("#loan_amount").val()).replace(/,/g,''));
            amort(loan_amount, $("#interest_rate").val()/100, $("#tenor_year").val() * 12);
        });

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

        $( ".sliderRange__wr_tenor" ).on( "slidechange", function( event, ui ) {
            $('#tenor_year').val(ui.value);
            $('#tenor_month').val(ui.value * 12);
            var loan_amount = parseInt( $.trim($("#loan_amount").val()).replace(/,/g,''));
            amort(loan_amount, $("#interest_rate").val()/100, $("#tenor_year").val() * 12);
        });

        $("#tenor_year").keyup(function(){
            $( ".sliderRange__wr_tenor" ).slider( "option", "value", $("#tenor_year").val() );
            var loan_amount = parseInt( $.trim($("#loan_amount").val()).replace(/,/g,''));
            amort(loan_amount, $("#interest_rate").val()/100, $("#tenor_year").val() * 12);
        });
        

        $(document).on('click', '.mortageCalTableToggle__wr', function(){
            // var tagid = $(this).data('tag');
            // $('.mortageCalTableCollapse__wr').removeClass('active');
            // $('.mortageCalInnerTableWrap__wr').slideUp("slow");
            var tagIdTableData = $(this).parent().parent().next().children().children('div');
            tagIdTableData.slideToggle("slow");
        });
    });

    // mortgage calc
    
    /**
     * Amort function:
     * Calculates the necessary elements of the loan using the supplied user input
     * and then displays each months updated amortization schedule on the page
    */
    function amort(balance, interestRate, terms)
    {
        console.log('amort called');
        //Calculate the per month interest rate
        var monthlyRate = interestRate/12;
        
        //Calculate the payment
        var payment = balance * (monthlyRate/(1-Math.pow(1+monthlyRate, -terms)));

        console.log(balance, monthlyRate, terms);
        //begin building the return string for the display of the amort table
        $('#prinicipal_amount_result').html(number_format(balance));
        $('#interest_rate_result').html(number_format(interestRate*100) + '%');
        $('#monthly_emi_result').html(number_format(payment));
        $('#total_payable_result').html(number_format(payment * terms));

        let chartStatus = Chart.getChart("myChart"); // <canvas> id
        if (chartStatus != undefined) {
            chartStatus.destroy();
        }

        var ctx = document.getElementById('myChart');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                //labels: ['Principal Amount', 'Interest Amount'],
                datasets: [
                    {
                        label: 'Total Amount Payable',
                        data: [(payment * terms)],
                        //borderWidth: 2,
                        backgroundColor: ['#000000']
                    },
                    {
                        label: "Payable",
                        data: [balance, ( (payment * terms) - balance )],
                        //borderWidth: 1,
                        backgroundColor: ['#06a647', '#fe0002']
                    }
                ]
            },
            options: {
                responsive: true,
            },
        });

        /**
         * Loop that calculates the monthly Loan amortization amounts then adds 
         * them to the return string 
         */
        var opening_y = balance;
        var closing_y = balance;
        var interest_y = 0;
        var principal_y = 0;
        var result_html = '';
        var result_data = new Array();
        var years = 1;

        var month_names_short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        for (var count = 0; count < terms; ++count)
        { 

            var opening = balance;
            var interest = balance * monthlyRate;
            var monthlyPrincipal = payment - interest;
            balance = balance - monthlyPrincipal;	
            var closing = balance;

            
            closing_y -= monthlyPrincipal;
            interest_y += interest;
            principal_y += monthlyPrincipal;

            result_data.push({
                'opening': opening,
                'emi': payment,
                'interest': interest,
                'principal': monthlyPrincipal,
                'closing': closing
            });

            if( (count+1) % 12 == 0 ){
                
                result_html += '<tr>';
                    result_html += '<td>';
                        result_html += '<button type="button" class="btn mortageCalTableToggle__wr" data-tag="yearly_data_' + years + '"><span class="labelText__wr">' + String(years).padStart(2, '0') + '</span><i class="fa-solid fa-caret-down"></i></button>';
                    result_html += '</td>';
                    result_html += '<td>' + number_format(opening_y) + '</td>';
                    result_html += '<td>' + number_format(payment * 12) + '</td>';
                    result_html += '<td>' + number_format(interest_y) + '</td>';
                    result_html += '<td>' + number_format(principal_y) + '</td>';
                    result_html += '<td>' + number_format(balance) + '</td>';
                result_html += '</tr>';

                result_html += '<tr class="mortageCalTableCollapse__wr" id="yearly_data_' + years + '">';
                        result_html += '<td colspan="6">';
                            result_html += '<div class="mortageCalInnerTableWrap__wr">';
                                result_html += '<table class="mb-0 mortageCalInnerDataTable__wr">';
                                    result_html += '<tbody>';
                $.each(result_data, function(k, v){
                    result_html += '<tr>';
                        result_html += '<td class="w_lg_8_per__wr">' + month_names_short[k] + '</td>';
                        result_html += '<td>' + number_format(v.opening) + '</td>';
                        result_html += '<td>' + number_format(v.emi) + '</td>';
                        result_html += '<td>' + number_format(v.interest) + '</td>';
                        result_html += '<td>' + number_format(v.principal) + '</td>';
                        result_html += '<td>' + number_format(v.closing) + '</td>';
                    result_html += '</tr>';
                });
                result_html += '</tbody>';
                                result_html += '</table>';
                            result_html += '</div>';
                        result_html += '</td>';
                    result_html += '</tr>';

                years++;
                opening_y = balance;
                result_data = new Array();
            }
            
        }
        
        $('#amortization_table').html(result_html);
    }

    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