@extends('layouts.master')

@section('content')
<!-- <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <h2>Loan Calculator</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Loan Calculator</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div> -->
<!--     
<section class="loan-calculator-page section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3 single-nav">
                    <h3>Personal Loan
                        <span>@ 3.75%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Home Loan
                        <span>@ 8.72%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Bussiness Loan
                        <span>@ 5.68%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Loanagainstproperty
                        <span>@ 7.40%</span>
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 loan-slider-box">
                    <div class="single-loan-slider">
                        <h4>Home Loan Amount</h4>
                        <div id="pricipal-slide" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 1.80361%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 1.80361%;"></a></div>
                        <div>
                            <span>$</span>
                            <h6 id="pricipal">100000</h6>
                        </div>
                    </div>
                    <div class="single-loan-slider">
                        <h4>Loan Months</h4>
                        <div id="totalyear-slide" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 31.0345%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 31.0345%;"></a></div>
                        <div>
                            <h6 id="totalyear">120</h6>
                            <span>Months</span>
                        </div>
                    </div>
                    <div class="single-loan-slider">
                        <h4>Interest Rate</h4>
                        <div id="intrest-slide" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 38.6139%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 38.6139%;"></a></div>
                        <div>
                            <h6 id="intrest">10</h6>
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center loan-emi">
                    <div class="total-calculation">
                        <div class="single-total">
                            <h5>Loan EMI</h5>
                            <h2 class="emi-price" id="emi">1,321.51</h2>
                        </div>
                        <div class="single-total">
                            <h5>Total Interest Payable</h5>
                            <h2 id="tbl_emi">58,580.88</h2>
                        </div>
                        <div class="single-total">
                            <h5>Total Payment
<br>(Principal + Interest)</h5>
                            <h2 id="tbl_la">158,580.88</h2>
                        </div>
                        <button  id= "text"class="btn applybtn btn-default btn-sm">APPLY NOW</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
       -->
      <!-- <script type="text/javascript">  
   --> 
   <!-- <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <script src="asset/js/calculator.js"></script> -->

   <section class="loan-calculator-page section-padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3 single-nav">
                    <h3>Home Loan
                        <span>@ 3.75%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Personal Loan
                        <span>@ 8.72%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Car Loan
                        <span>@ 5.68%</span>
                    </h3>
                </div>
                <div class="col-md-3 single-nav">
                    <h3>Business Loan
                        <span>@ 7.40%</span>
                    </h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8 loan-slider-box">
                    <div class="single-loan-slider">
                        <h4>Home Loan Amount</h4>
                        <div id="pricipal-slide"></div>
                        <div>
                            <span>$</span>
                            <h6 id="pricipal"></h6>
                        </div>
                    </div>
                    <div class="single-loan-slider">
                        <h4>Loan Months</h4>
                        <div id="totalyear-slide"></div>
                        <div>
                            <h6 id="totalyear"></h6>
                            <span>Months</span>
                        </div>
                    </div>
                    <div class="single-loan-slider">
                        <h4>Interest Rate</h4>
                        <div id="intrest-slide"></div>
                        <div>
                            <h6 id="intrest"></h6>
                            <span>%</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-center loan-emi">
                    <div class="total-calculation">
                        <div class="single-total">
                            <h5>Loan EMI</h5>
                            <h2 class="emi-price" id="emi">0</h2>
                        </div>
                        <div class="single-total">
                            <h5>Total Interest Payable</h5>
                            <h2 id="tbl_emi">0</h2>
                        </div>
                        <div class="single-total">
                            <h5>Total Payment
<br>(Principal + Interest)</h5>
                            <h2 id="tbl_la">0</h2>
                        </div>
                        <button class="btn applybtn btn-default btn-sm">APPLY NOW</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
</script>
 <script type="text/javascript">
// $(document).ready(function() {
//   $('#pricipal-slide').slider({
//     min: 5000,
//     max: 500000,
//     step: 5000,
//     slide: function(event, ui) {
//       $('#emi').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
//       computeValue()
//       $('#tbl_emi').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
//       computeValue()
//       $('#tbl_la').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
//       computeValue()

//     },
    
//     stop: function(event, ui) {
//       $('#slider1-value').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
//       computeValue();

//     }
//   });

//   function computeValue() {
//     var amount = $('#slider1').slider('value');
//     $('#slider1-computedvalue').text(amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
//   }
// });
  -->

        // $.ajax({
        //     url: "/loan",
        //     type: 'post',
        //     data: {
        //         _token: '{{csrf_token()}}',
        //          Amount: $("#Amount").html(),
        //          Months: $("#month").html(),
        //          Rate: $("#Rate").text(),
        //     },
        //     contentType: false,
        //     processData: false,
        //     success: function( data ) {
        //         console.log(data);
        //     }
        // });
    


// function submitForm(){
//     if(typeof(localStorage) != "undefined"){
//         localStorage.loan = $('[data-value="loan"]').html();
//         localStorage.months = $('[data-value="months"]').html();
//         localStorage.payment = $('[data-value="fee"]').html();
//     }
//     document.getElementById("loanFormSubmit").submit();
// }

// function setData(){
//     if(typeof(localStorage) != "undefined"){
//         document.getElementById("loan").innerHTML = localStorage.loan;
//         document.getElementById("month").innerHTML = localStorage.months;
//         document.getElementById("pay").innerHTML = localStorage.payment;
//    }
// }
$.ajaxSetup({

         headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
         });
         
  </script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script src="asset/js/popper.min.js"></script>
    <script src="asset/js/bootstrap.min.js"></script>
    <script src="asset/js/jquery.nice-select.js"></script>
    <script src="asset/js/menumaker.js"></script>
    <script src="asset/js/owl.carousel.min.js"></script>
    <script src="asset/js/calculator.js"></script>
    <script src="asset/js/slider.js"></script>
    <script src="asset/js/active.js"></script>
@stop