@extends('layouts.buddy-screens')
@section('content')
<style>
  ul.nav.nav-pills li.active{
    background: transparent !important;
  }
  ul.nav.nav-pills li{
    background: transparent !important;
    border-right: 1px solid #e8e0e0 !important;
  }
  ul.nav.nav-pills li:last-child{border:none !important;}
  ul.nav.nav-pills li.active a {
    color: #308a09 !important;
    font-weight: 800;
    border-bottom: 2px solid #308a09;
}
ul.nav.nav-pills li{
  width: 25% !important;
  margin: 0 !important;
}

@media only screen and (max-width: 767px) {
  ul.nav.nav-pills li {
    width: 100% !important;
    padding-right: 25px !important;
}
.nav-pills li a{
  font-size: 10px;
  margin-left: 15px;
}
#exTab3 .nav{
  padding-top: 20px;
}
.sub-container{
  padding: 0;
}
#exTab3 .tab-content {
    padding: 0;
}
.fix-content{
  padding: 0;
}
.details{
  padding: 15px !important;
}
.detail p {
    font-size: 12px;
}
.details p {
    font-size: 12px;
}
.footer{
  display: block !important;
}
.newbtn{
  padding-right: 0 !important;
  text-align: center;
  padding-bottom: 35px;
}
.loan-details{
  display: inline-block !important;
  width: 100% !important;
  padding: 0 !important;
  padding-top: 30px !important;
}
#price{
  font-size: 20px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer{
    display: block !important;
  }
  .newbtn{
    padding-left: 25px;
    padding-bottom: 35px; 
  }

  .loan-details{
    padding-left: 0 !important;
  }

}
</style>
		<!-- Content wrapper -->
          <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
              @if(session('success') == "Opps! You do not have access")    
			
              @elseif(session()->has('success'))
                <div class="alert alert-success alert-dismissable custom-success-box">
                  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                  <strong> {{session('success')}} </strong>
                </div>	
              @endif
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Dashboard /</span><span class="text-muted fw-light"> Insurance /</span>Term Insurance</h4>
              
              <div class="main">
     <div class="container">
        <div class="row">
            <div class="col-lg-6 first">
                <h2>Term Insurance</h2>
                <p>Term insurance plans offer your family much-needed financial security after you, in exchange for a specified premium amount. In case of an unfortunate demise of the life insured during the policy term, the insurer provides a death benefit payout to the nominee, called as life cover, to manage their expenses</p>
                <p>Term insurance policy is a popular choice for individuals seeking comprehensive coverage at affordable premiums. Financial security and the protection of loved ones are paramount considerations for anyone who wants to ensure a stable future.</p>
                <button type="button" class="button-adjust" data-toggle="button" aria-pressed="false" autocomplete="off">
                    Read More
                </button>
                
                <div class="items">
                    <ul>
                        <li class="item1">
                            <img src="{{asset('/assets/dashboard/assets/img/elements/Frame2.png')}}" alt="">
                           <p> Pure Protection Plan</p></li>
                        <li>
                            <img src="{{asset('/assets/dashboard/assets/img/elements/Frame.png')}}" alt="">
                           <p> Tax Deduction under 80c</li>
                    </ul>
                </div>
                <div class="items1">
                    <ul>
                        <li class="item2">
                            <img src="{{asset('/assets/dashboard/assets/img/elements/Frame1.png')}}" alt="">
                            <p>Affordable Premium</p></li>
                        <li>
                            <img src="{{asset('/assets/dashboard/assets/img/elements/financial.png')}}" alt="">
                            <p>Financial Security To Your Family</p></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-6 second">
              <div class="container">
                <div class="row">
                <form action="" class="setting-form">
                        
                        <h2>Apply for Term Insurance</h2>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="first_name" id="first_name" class="form-control input-lg" placeholder="Name" tabindex="1">
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="date"  name="dob" id="date" class="form-control input-lg" placeholder="DOB" value="DOB" tabindex="2">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="first_name" id="phone_number" class="form-control input-lg" placeholder="Phone Number" tabindex="1">
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group">
                                    <input type="text" name="last_name" id="email" class="form-control input-lg" placeholder="Email" tabindex="2">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group setafter">
                                <select name="
                                    " id="income" form="annual_income">
                                    <option value="occupation">Occupation</option>
  <option value="salaried">Salaried </option>
  <option value="self employed">Self Employed</option>
</select>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group setafter">
                                    <!-- <select type="text" name="annual_income" id="annual_income" class="form-control input-lg" tabindex="1">
                                        <option value="" disabled selected hidden>Annual Income</option>
                                        <option value="">Annual Income</option>
                                    </select> -->
                                    <select name="
                                    " id="income" form="annual_income">
                                    <option value="25 Lac +">Select your annual income</option>
                                    <option value="25 Lac +">25 Lac +</option>
                                    <option value="25 Lac +">25 Lac +</option>
                                    <option value="15 Lac to 24.9 Lac">15 Lac to 24.9 Lac</option>
                                    <option value="10 Lac to 14.9 Lac">10 Lac to 14.9 Lac</option>
                                    <option value="8 Lac to 9.9 Lac">8 Lac to 9.9 Lac</option>
                                    <option value="5 Lac to 7.9 Lac">5 Lac to 7.9 Lac</option>
                                    <option value="5 Lac to 7.9 Lac">5 Lac to 7.9 Lac</option>
                                    <option value="2 Lac to 2.9 Lac">2 Lac to 2.9 Lac</option>
                                    <option value="Less than 2 Lac">Less than 2 Lac</option>

</select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group setafter">
                                <select name="
                                    " id="Education" form="education_qualification">
                                    <option value="Educational">Select Educational Qualification</option>
  <option value="college_graduate">College graduate & above
  </option>
  <option value="12th Pass">12th Pass</option>
  <option value="10th Pass & below">10th Pass & below</option>
</select>
                                </div>
                            </div>
                            <div class="col-xs-6 col-sm-6 col-md-6">
                                <div class="form-group setafter">
                                <select name="
                                    " id="question" form="question">
                                    <option value="tobacco">Do you Smoke or Chew tobacco?</option>
  <option value="yes">Yes
  </option>
  <option value="No">No</option>
</select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div>
                                <input type="submit" class="btn btn-success submit" value="Enquire Now">
                    </div>
                </div>
        </form>
                </div>
              </div>
              
            </div>
            <hr class="term-page">
    <div class="container loanfix">
        <div class="row">
            <div class="col-lg-12 third">
                <h2>
                    Calculate Your Loan
                </h2>
                <p>
                    Let Us Understand How The Term Insurance Works With The Help Of Example.
                </p>
            </div>
            <div class="col-lg-12 fix-content">
              <div id="exTab3" class="container">	
<ul  class="nav nav-pills">
			<li class="active">
        <img class="fixingcont" src="{{asset('/assets/dashboard/assets/img/elements/calculator.png')}}">
        <a class="motors fixingdes"  href="#11b" data-toggle="tab">Calculate monthly EMI</a>
			</li>
			<li>
      <img class="fixingcont" src="{{asset('/assets/dashboard/assets/img/elements/eligibility.png')}}">
        <a class="propertys fixingdes" href="#22b" data-toggle="tab">Know Your Eligibility</a>
			</li>
			<li><img class="fixingcont" src="{{asset('/assets/dashboard/assets/img/elements/homebuy.png')}}"><a class="commercials fixingdes" href="#33b" data-toggle="tab">Calculate Home Buying Budget</a>
			</li>
  		<li><img class="fixingcont" src="{{asset('/assets/dashboard/assets/img/elements/refinance.png')}}"><a class="liabilitys fixingdes" href="#44b" data-toggle="tab">Calculate Home Refinance Loan</a>
			</li>
      
		</ul>

			<div class="tab-content clearfix">
			  <div class="tab-pane active" id="11b">
        <div class="container">
          <div class="row">
	<div class="sub-container">
		<div class="view">
      <div class="col-md-12">
			<div class="details">
				<div>
					<div class="detail">
						<p style="color: #000;" >Loan Amount</p>
						<p id="loan-amt-text" style="color: #000; border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-amount" min="100000" max="10000000" step="50000">
          <p style="color: #000; ">₹ 1,00,000 <span style="float:right; ">₹ 10 Crore</span></p>
         
				</div>
				<div>
					<div class="detail">
						<p style="color: #000;">Tenure (Years)</p>
						<p id="loan-period-text" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-period" min="1" max="30" step="1">
          <p style="color: #000;">1 <span style="float:right;">30</span></p>
				</div>
				<div>
					<div class="detail">
						<p style="color: #000">Interest Rate (% P.A.)</p>
						<p id="interest-rate-text" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="interest-rate" min="0.5" max="15" step="0.5">
          <p style="color: #000;">0.5%<span style="float:right;">15%</span></p>
				</div>
			</div>
      </div>
      <div class="row">
      <div class="col-md-8">
        <!-- <div class="row"> -->
        <div class="footer payable">
				<p id="price-container" class="price-container"><span id="price0" class="price">0</span>/mo</p>
        <div class="newbtn">
          <button class="apply">Apply Now</button>
        </div>
			</div>
      <div class="loan-details">
			<div class='chart-details'>
				<p style="color: #000">Principal</p>
				<p id="cp" class="cp" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Interest</p>
				<p id="ci" class="ci" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Total Payable</p>
				<p id="ct" class="ct" style="color: #309604; font-size: 17px;"></p>
			</div>
		</div>
        <!-- </div> -->
      </div>
      <div class="col-md-4">
      <div class="breakup">
			<canvas id="pieChart" class="pieChart"></canvas>
		</div>
      </div></div>
      
			
		</div>
		
	</div>
	<div>
		
	</div>
  </div>
</div>
				</div>
				<div class="tab-pane" id="22b">
        <div class="container">
          <div class="row">
	<div class="sub-container">
		<div class="view">
      <div class="col-md-12">
			<div class="details">
				<div>
					<div class="detail">
						<p style="color: #000;" >Loan Amount</p>
						<p id="loan-amt-texts" style="color: #000; border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-amounts" min="100000" max="10000000" step="50000">
          <p style="color: #000; ">₹ 1,00,000 <span style="float:right; ">₹ 10 Crore</span></p>
         
				</div>
				<div>
					<div class="detail">
						<p style="color: #000;">Tenure (Years)</p>
						<p id="loan-period-texts" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-periods" min="1" max="30" step="1">
          <p style="color: #000;">1 <span style="float:right;">30</span></p>
				</div>
				<div>
					<div class="detail">
						<p style="color: #000">Interest Rate (% P.A.)</p>
						<p id="interest-rate-texts" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="interest-rates" min="0.5" max="15" step="0.5">
          <p style="color: #000;">0.5%<span style="float:right;">15%</span></p>
				</div>
			</div>
      </div>
      <div class="row">
      <div class="col-md-8">
        <!-- <div class="row"> -->
        <div class="footer payable">
				<p id="price-containers"><span id="price2">0</span>/mo</p>
        <div class="newbtn">
          <button class="apply">Apply Now</button>
        </div>
			</div>
      <div class="loan-details">
			<div class='chart-details'>
				<p style="color: #000">Principal</p>
				<p id="cpp" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Interest</p>
				<p id="cii" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Total Payable</p>
				<p id="ctt" style="color: #309604; font-size: 17px;"></p>
			</div>
		</div>
        <!-- </div> -->
      </div>
      <div class="col-md-4">
      <div class="breakup">
			<canvas id="pieCharts"></canvas>
		</div>
      </div></div>
      
			
		</div>
		
	</div>
	<div>
		
	</div>
  </div>
</div>
				</div>
        <div class="tab-pane" id="33b">
        <div class="container">
          <div class="row">
	<div class="sub-container">
		<div class="view">
      <div class="col-md-12">
			<div class="details">
				<div>
					<div class="detail">
						<p style="color: #000;" >Loan Amount</p>
						<p id="loan-amt-textss" style="color: #000; border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-amountss" min="100000" max="10000000" step="50000">
          <p style="color: #000; ">₹ 1,00,000 <span style="float:right; ">₹ 10 Crore</span></p>
         
				</div>
				<div>
					<div class="detail">
						<p style="color: #000;">Tenure (Years)</p>
						<p id="loan-period-textss" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-periodss" min="1" max="30" step="1">
          <p style="color: #000;">1 <span style="float:right;">30</span></p>
				</div>
				<div>
					<div class="detail">
						<p style="color: #000">Interest Rate (% P.A.)</p>
						<p id="interest-rate-textss" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="interest-ratess" min="0.5" max="15" step="0.5">
          <p style="color: #000;">0.5%<span style="float:right;">15%</span></p>
				</div>
			</div>
      </div>
      <div class="row">
      <div class="col-md-8">
        <!-- <div class="row"> -->
        <div class="footer payable">
				<p id="price-containers"><span id="price1">0</span>/mo</p>
        <div class="newbtn">
          <button class="apply">Apply Now</button>
        </div>
			</div>
      <div class="loan-details">
			<div class='chart-details'>
				<p style="color: #000">Principal</p>
				<p id="cppp" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Interest</p>
				<p id="ciii" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Total Payable</p>
				<p id="cttt" style="color: #309604; font-size: 17px;"></p>
			</div>
		</div>
        <!-- </div> -->
      </div>
      <div class="col-md-4">
      <div class="breakup">
			<canvas id="pieCharts"></canvas>
		</div>
      </div></div>
      
			
		</div>
		
	</div>
	<div>
		
	</div>
  </div>
</div>
				</div>
          <div class="tab-pane" id="44b">
          <div class="container">
          <div class="row">
	<div class="sub-container">
		<div class="view">
      <div class="col-md-12">
			<div class="details">
				<div>
					<div class="detail">
						<p style="color: #000;" >Loan Amount</p>
						<p id="loan-amt-textsss" style="color: #000; border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-amountsss" min="100000" max="10000000" step="50000">
          <p style="color: #000; ">₹ 1,00,000 <span style="float:right; ">₹ 10 Crore</span></p>
         
				</div>
				<div>
					<div class="detail">
						<p style="color: #000;">Tenure (Years)</p>
						<p id="loan-period-textsss" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="loan-periodsss" min="1" max="30" step="1">
          <p style="color: #000;">1 <span style="float:right;">30</span></p>
				</div>
				<div>
					<div class="detail">
						<p style="color: #000">Interest Rate (% P.A.)</p>
						<p id="interest-rate-textsss" style="color: #000;border: 1px solid #309604;
    padding: 5px;"></p>
					</div>
					<input type="range" id="interest-ratesss" min="0.5" max="15" step="0.5">
          <p style="color: #000;">0.5%<span style="float:right;">15%</span></p>
				</div>
			</div>
      </div>
      <div class="row">
      <div class="col-md-8">
        <!-- <div class="row"> -->
        <div class="footer payable">
				<p id="price-containers"><span id="price3">0</span>/mo</p>
        <div class="newbtn">
          <button class="apply">Apply Now</button>
        </div>
			</div>
      <div class="loan-details">
			<div class='chart-details'>
				<p style="color: #000">Principal</p>
				<p id="cpppp" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Interest</p>
				<p id="ciiii" style="color: #309604; font-size: 17px;"></p>
			</div>
			<div class='chart-details'>
				<p style="color: #000">Total Payable</p>
				<p id="ctttt" style="color: #309604; font-size: 17px;"></p>
			</div>
		</div>
        <!-- </div> -->
      </div>
      <div class="col-md-4">
      <div class="breakup">
			<canvas id="pieCharts"></canvas>
		</div>
      </div></div>
      
			
		</div>
		
	</div>
	<div>
		
	</div>
  </div>
</div>
				</div>
			</div>

</div>

              <!--/ Card layout -->
            </div>
          

   
    
        </div>
    </div>
    <!-- <div class="hr-num">
    <hr class="term-pages">
    </div> -->
   
    </div>
           
              <!--/ Card layout -->
            </div>
            </div>
            <!-- / Content -->

            <link rel="stylesheet" href="{{asset('assets/dashboard/assets/css/insurance.css')}}" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
  <!-- First Tab !-->
  <script>
    var P, R, N, pie, line;
var loan_amt_slider = document.getElementById("loan-amount");
var int_rate_slider = document.getElementById("interest-rate");
var loan_period_slider = document.getElementById("loan-period");

// update loan amount
loan_amt_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-amt-text").innerText =
		parseInt(self.target.value).toLocaleString("en-US") + "₹";
	P = parseFloat(self.target.value);
	displayDetails();
});

// update Rate of Interest
int_rate_slider.addEventListener("input", (self) => {
	document.querySelector("#interest-rate-text").innerText =
		self.target.value + "%";
	R = parseFloat(self.target.value);
	displayDetails();
});

// update loan period
loan_period_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-period-text").innerText =
		self.target.value + " years";
	N = parseFloat(self.target.value);
	displayDetails();
});

// calculate total Interest payable
function calculateLoanDetails(p, r, emi) {
	/*
		p: principal
		r: rate of interest
		emi: monthly emi
	*/
	let totalInterest = 0;
	let yearlyInterest = [];
	let yearPrincipal = [];
	let years = [];
	let year = 1;
	let [counter, principal, interes] = [0, 0, 0];
	while (p > 0) {
		let interest = parseFloat(p) * parseFloat(r);
		p = parseFloat(p) - (parseFloat(emi) - interest);
		totalInterest += interest;
		principal += parseFloat(emi) - interest;
		interes += interest;
		if (++counter == 12) {
			years.push(year++);
			yearlyInterest.push(parseInt(interes));
			yearPrincipal.push(parseInt(principal));
			counter = 0;
		}
	}
	line.data.datasets[0].data = yearPrincipal;
	line.data.datasets[1].data = yearlyInterest;
	line.data.labels = years;
	return totalInterest;
}

// calculate details
function displayDetails() {
	let r = parseFloat(R) / 1200;
	let n = parseFloat(N) * 12;

	let num = parseFloat(P) * r * Math.pow(1 + r, n);
	let denom = Math.pow(1 + r, n) - 1;
	let emi = parseFloat(num) / parseFloat(denom);

	let payabaleInterest = calculateLoanDetails(P, r, emi);

	let opts = '{style: "decimal", currency: "US"}';

	document.querySelector("#cp").innerText =
		parseFloat(P).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ci").innerText =
		parseFloat(payabaleInterest).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ct").innerText =
		parseFloat(parseFloat(P) + parseFloat(payabaleInterest)).toLocaleString(
			"en-US",
			opts
		) + "₹";

	document.querySelector("#price0").innerText =
		parseFloat(emi).toLocaleString("en-US", opts) + "₹";

	pie.data.datasets[0].data[0] = P;
	pie.data.datasets[0].data[1] = payabaleInterest;
	pie.update();
	line.update();
}

// Initialize everything
function initialize() {
	document.querySelector("#loan-amt-text").innerText =
		parseInt(loan_amt_slider.value).toLocaleString("en-US") + "₹";
	P = parseFloat(document.getElementById("loan-amount").value);

	document.querySelector("#interest-rate-text").innerText =
		int_rate_slider.value + "%";
	R = parseFloat(document.getElementById("interest-rate").value);

	document.querySelector("#loan-period-text").innerText =
		loan_period_slider.value + " years";
	N = parseFloat(document.getElementById("loan-period").value);

	line = new Chart(document.getElementById("lineChart"), {
		data: {
			datasets: [
				{
					type: "line",
					label: "Yearly Principal paid",
					borderColor: "rgba(31, 85, 7, 1)",
					data: []
				},
				{
					type: "line",
					label: "Yearly Interest paid",
					borderColor: "rgb(255, 99, 132)",
					data: []
				}
			],
			labels: []
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Yearly Payment Breakdown"
				}
			},
			scales: {
				x: {
					title: {
						color: "grey",
						display: true,
						text: "Years Passed"
					}
				},
				y: {
					title: {
						color: "grey",
						display: true,
						text: "Money in Rs."
					}
				}
			}
		}
	});

	pie = new Chart(document.getElementById("pieChart"), {
		type: "doughnut",
		data: {
			labels: ["Principal", "Interest"],
			datasets: [
				{
					label: "Home Loan Details",
					data: [0, 0],
					backgroundColor: ["rgba(48, 150, 4, 1)", "rgba(249, 185, 82, 1)"],
					hoverOffset: 4
				}
			]
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Payment Breakup"
				}
			}
		}
	});
	displayDetails();
}
initialize();

  </script>
   <!-- Second Tab !-->
   <script>
    var P, R, N, pie, line;
var loan_amt_slider = document.getElementById("loan-amounts");
var int_rate_slider = document.getElementById("interest-rates");
var loan_period_slider = document.getElementById("loan-periods");

// update loan amount
loan_amt_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-amt-texts").innerText =
		parseInt(self.target.value).toLocaleString("en-US") + "₹";
	P = parseFloat(self.target.value);
	displayDetails();
});

// update Rate of Interest
int_rate_slider.addEventListener("input", (self) => {
	document.querySelector("#interest-rate-texts").innerText =
		self.target.value + "%";
	R = parseFloat(self.target.value);
	displayDetails();
});

// update loan period
loan_period_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-period-texts").innerText =
		self.target.value + " years";
	N = parseFloat(self.target.value);
	displayDetails();
});

// calculate total Interest payable
function calculateLoanDetails(p, r, emi) {
	/*
		p: principal
		r: rate of interest
		emi: monthly emi
	*/
	let totalInterest = 0;
	let yearlyInterest = [];
	let yearPrincipal = [];
	let years = [];
	let year = 1;
	let [counter, principal, interes] = [0, 0, 0];
	while (p > 0) {
		let interest = parseFloat(p) * parseFloat(r);
		p = parseFloat(p) - (parseFloat(emi) - interest);
		totalInterest += interest;
		principal += parseFloat(emi) - interest;
		interes += interest;
		if (++counter == 12) {
			years.push(year++);
			yearlyInterest.push(parseInt(interes));
			yearPrincipal.push(parseInt(principal));
			counter = 0;
		}
	}
	line.data.datasets[0].data = yearPrincipal;
	line.data.datasets[1].data = yearlyInterest;
	line.data.labels = years;
	return totalInterest;
}

// calculate details
function displayDetails() {
	let r = parseFloat(R) / 1200;
	let n = parseFloat(N) * 12;

	let num = parseFloat(P) * r * Math.pow(1 + r, n);
	let denom = Math.pow(1 + r, n) - 1;
	let emi = parseFloat(num) / parseFloat(denom);

	let payabaleInterest = calculateLoanDetails(P, r, emi);

	let opts = '{style: "decimal", currency: "US"}';

	document.querySelector("#cpp").innerText =
		parseFloat(P).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#cii").innerText =
		parseFloat(payabaleInterest).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ctt").innerText =
		parseFloat(parseFloat(P) + parseFloat(payabaleInterest)).toLocaleString(
			"en-US",
			opts
		) + "₹";

	document.querySelector("#price1").innerText =
		parseFloat(emi).toLocaleString("en-US", opts) + "₹";

	pie.data.datasets[0].data[0] = P;
	pie.data.datasets[0].data[1] = payabaleInterest;
	pie.update();
	line.update();
}

// Initialize everything
function initialize() {
	document.querySelector("#loan-amt-texts").innerText =
		parseInt(loan_amt_slider.value).toLocaleString("en-US") + "₹";
	P = parseFloat(document.getElementById("loan-amounts").value);

	document.querySelector("#interest-rate-texts").innerText =
		int_rate_slider.value + "%";
	R = parseFloat(document.getElementById("interest-rates").value);

	document.querySelector("#loan-period-texts").innerText =
		loan_period_slider.value + " years";
	N = parseFloat(document.getElementById("loan-periods").value);

	line = new Chart(document.getElementById("lineCharts"), {
		data: {
			datasets: [
				{
					type: "line",
					label: "Yearly Principal paid",
					borderColor: "rgba(31, 85, 7, 1)",
					data: []
				},
				{
					type: "line",
					label: "Yearly Interest paid",
					borderColor: "rgb(255, 99, 132)",
					data: []
				}
			],
			labels: []
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Yearly Payment Breakdown"
				}
			},
			scales: {
				x: {
					title: {
						color: "grey",
						display: true,
						text: "Years Passed"
					}
				},
				y: {
					title: {
						color: "grey",
						display: true,
						text: "Money in Rs."
					}
				}
			}
		}
	});

	pie = new Chart(document.getElementById("pieCharts"), {
		type: "doughnut",
		data: {
			labels: ["Principal", "Interest"],
			datasets: [
				{
					label: "Home Loan Details",
					data: [0, 0],
					backgroundColor: ["rgba(48, 150, 4, 1)", "rgba(249, 185, 82, 1)"],
					hoverOffset: 4
				}
			]
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Payment Breakup"
				}
			}
		}
	});
	displayDetails();
}
initialize();

  </script>

     <!-- Third Tab !-->
     <script>
    var P, R, N, pie, line;
var loan_amt_slider = document.getElementById("loan-amountss");
var int_rate_slider = document.getElementById("interest-ratess");
var loan_period_slider = document.getElementById("loan-periodss");

// update loan amount
loan_amt_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-amt-textss").innerText =
		parseInt(self.target.value).toLocaleString("en-US") + "₹";
	P = parseFloat(self.target.value);
	displayDetails();
});

// update Rate of Interest
int_rate_slider.addEventListener("input", (self) => {
	document.querySelector("#interest-rate-textss").innerText =
		self.target.value + "%";
	R = parseFloat(self.target.value);
	displayDetails();
});

// update loan period
loan_period_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-period-textss").innerText =
		self.target.value + " years";
	N = parseFloat(self.target.value);
	displayDetails();
});

// calculate total Interest payable
function calculateLoanDetails(p, r, emi) {
	/*
		p: principal
		r: rate of interest
		emi: monthly emi
	*/
	let totalInterest = 0;
	let yearlyInterest = [];
	let yearPrincipal = [];
	let years = [];
	let year = 1;
	let [counter, principal, interes] = [0, 0, 0];
	while (p > 0) {
		let interest = parseFloat(p) * parseFloat(r);
		p = parseFloat(p) - (parseFloat(emi) - interest);
		totalInterest += interest;
		principal += parseFloat(emi) - interest;
		interes += interest;
		if (++counter == 12) {
			years.push(year++);
			yearlyInterest.push(parseInt(interes));
			yearPrincipal.push(parseInt(principal));
			counter = 0;
		}
	}
	line.data.datasets[0].data = yearPrincipal;
	line.data.datasets[1].data = yearlyInterest;
	line.data.labels = years;
	return totalInterest;
}

// calculate details
function displayDetails() {
	let r = parseFloat(R) / 1200;
	let n = parseFloat(N) * 12;

	let num = parseFloat(P) * r * Math.pow(1 + r, n);
	let denom = Math.pow(1 + r, n) - 1;
	let emi = parseFloat(num) / parseFloat(denom);

	let payabaleInterest = calculateLoanDetails(P, r, emi);

	let opts = '{style: "decimal", currency: "US"}';

	document.querySelector("#cppp").innerText =
		parseFloat(P).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ciii").innerText =
		parseFloat(payabaleInterest).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#cttt").innerText =
		parseFloat(parseFloat(P) + parseFloat(payabaleInterest)).toLocaleString(
			"en-US",
			opts
		) + "₹";

	document.querySelector("#price2").innerText =
		parseFloat(emi).toLocaleString("en-US", opts) + "₹";

	pie.data.datasets[0].data[0] = P;
	pie.data.datasets[0].data[1] = payabaleInterest;
	pie.update();
	line.update();
}

// Initialize everything
function initialize() {
	document.querySelector("#loan-amt-textss").innerText =
		parseInt(loan_amt_slider.value).toLocaleString("en-US") + "₹";
	P = parseFloat(document.getElementById("loan-amountss").value);

	document.querySelector("#interest-rate-textss").innerText =
		int_rate_slider.value + "%";
	R = parseFloat(document.getElementById("interest-ratess").value);

	document.querySelector("#loan-period-textss").innerText =
		loan_period_slider.value + " years";
	N = parseFloat(document.getElementById("loan-periodss").value);

	line = new Chart(document.getElementById("lineCharts"), {
		data: {
			datasets: [
				{
					type: "line",
					label: "Yearly Principal paid",
					borderColor: "rgba(31, 85, 7, 1)",
					data: []
				},
				{
					type: "line",
					label: "Yearly Interest paid",
					borderColor: "rgb(255, 99, 132)",
					data: []
				}
			],
			labels: []
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Yearly Payment Breakdown"
				}
			},
			scales: {
				x: {
					title: {
						color: "grey",
						display: true,
						text: "Years Passed"
					}
				},
				y: {
					title: {
						color: "grey",
						display: true,
						text: "Money in Rs."
					}
				}
			}
		}
	});

	pie = new Chart(document.getElementById("pieCharts"), {
		type: "doughnut",
		data: {
			labels: ["Principal", "Interest"],
			datasets: [
				{
					label: "Home Loan Details",
					data: [0, 0],
					backgroundColor: ["rgba(48, 150, 4, 1)", "rgba(249, 185, 82, 1)"],
					hoverOffset: 4
				}
			]
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Payment Breakup"
				}
			}
		}
	});
	displayDetails();
}
initialize();

  </script>

       <!-- FourthTab !-->
       <script>
    var P, R, N, pie, line;
var loan_amt_slider = document.getElementById("loan-amountsss");
var int_rate_slider = document.getElementById("interest-ratesss");
var loan_period_slider = document.getElementById("loan-periodsss");

// update loan amount
loan_amt_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-amt-textsss").innerText =
		parseInt(self.target.value).toLocaleString("en-US") + "₹";
	P = parseFloat(self.target.value);
	displayDetails();
});

// update Rate of Interest
int_rate_slider.addEventListener("input", (self) => {
	document.querySelector("#interest-rate-textsss").innerText =
		self.target.value + "%";
	R = parseFloat(self.target.value);
	displayDetails();
});

// update loan period
loan_period_slider.addEventListener("input", (self) => {
	document.querySelector("#loan-period-textsss").innerText =
		self.target.value + " years";
	N = parseFloat(self.target.value);
	displayDetails();
});

// calculate total Interest payable
function calculateLoanDetails(p, r, emi) {
	/*
		p: principal
		r: rate of interest
		emi: monthly emi
	*/
	let totalInterest = 0;
	let yearlyInterest = [];
	let yearPrincipal = [];
	let years = [];
	let year = 1;
	let [counter, principal, interes] = [0, 0, 0];
	while (p > 0) {
		let interest = parseFloat(p) * parseFloat(r);
		p = parseFloat(p) - (parseFloat(emi) - interest);
		totalInterest += interest;
		principal += parseFloat(emi) - interest;
		interes += interest;
		if (++counter == 12) {
			years.push(year++);
			yearlyInterest.push(parseInt(interes));
			yearPrincipal.push(parseInt(principal));
			counter = 0;
		}
	}
	line.data.datasets[0].data = yearPrincipal;
	line.data.datasets[1].data = yearlyInterest;
	line.data.labels = years;
	return totalInterest;
}

// calculate details
function displayDetails() {
	let r = parseFloat(R) / 1200;
	let n = parseFloat(N) * 12;

	let num = parseFloat(P) * r * Math.pow(1 + r, n);
	let denom = Math.pow(1 + r, n) - 1;
	let emi = parseFloat(num) / parseFloat(denom);

	let payabaleInterest = calculateLoanDetails(P, r, emi);

	let opts = '{style: "decimal", currency: "US"}';

	document.querySelector("#cpppp").innerText =
		parseFloat(P).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ciiii").innerText =
		parseFloat(payabaleInterest).toLocaleString("en-US", opts) + "₹";

	document.querySelector("#ctttt").innerText =
		parseFloat(parseFloat(P) + parseFloat(payabaleInterest)).toLocaleString(
			"en-US",
			opts
		) + "₹";

	document.querySelector("#price3").innerText =
		parseFloat(emi).toLocaleString("en-US", opts) + "₹";

	pie.data.datasets[0].data[0] = P;
	pie.data.datasets[0].data[1] = payabaleInterest;
	pie.update();
	line.update();
}

// Initialize everything
function initialize() {
	document.querySelector("#loan-amt-textsss").innerText =
		parseInt(loan_amt_slider.value).toLocaleString("en-US") + "₹";
	P = parseFloat(document.getElementById("loan-amountsss").value);

	document.querySelector("#interest-rate-textsss").innerText =
		int_rate_slider.value + "%";
	R = parseFloat(document.getElementById("interest-ratesss").value);

	document.querySelector("#loan-period-textsss").innerText =
		loan_period_slider.value + " years";
	N = parseFloat(document.getElementById("loan-periodsss").value);

	line = new Chart(document.getElementById("lineCharts"), {
		data: {
			datasets: [
				{
					type: "line",
					label: "Yearly Principal paid",
					borderColor: "rgba(31, 85, 7, 1)",
					data: []
				},
				{
					type: "line",
					label: "Yearly Interest paid",
					borderColor: "rgb(255, 99, 132)",
					data: []
				}
			],
			labels: []
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Yearly Payment Breakdown"
				}
			},
			scales: {
				x: {
					title: {
						color: "grey",
						display: true,
						text: "Years Passed"
					}
				},
				y: {
					title: {
						color: "grey",
						display: true,
						text: "Money in Rs."
					}
				}
			}
		}
	});

	pie = new Chart(document.getElementById("pieCharts"), {
		type: "doughnut",
		data: {
			labels: ["Principal", "Interest"],
			datasets: [
				{
					label: "Home Loan Details",
					data: [0, 0],
					backgroundColor: ["rgba(48, 150, 4, 1)", "rgba(249, 185, 82, 1)"],
					hoverOffset: 4
				}
			]
		},
		options: {
			plugins: {
				title: {
					display: true,
					text: "Payment Breakup"
				}
			}
		}
	});
	displayDetails();
}
initialize();

  </script>
  

 <script>
		//CKEDITOR.replace( 'description' );
		function showdoc(value)
		{
			if(value=='Yes')
			{
				$("#signed_mandate_available_doc").show();
			}else{
				$("#signed_mandate_available_doc").hide();
			}
		}
</script>
<script>
    tinymce.init({
      selector: '#description',
      plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
      toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
      tinycomments_mode: 'embedded',
      tinycomments_author: 'Author name',
      mergetags_list: [
        { value: 'First.Name', title: 'First Name' },
        { value: 'Email', title: 'Email' },
      ]
    });
	
	
	function hide(){
    $('#smallModal_homeloan').hide();
    setTimeout(() => {
      window.location.href = @json(session()->get('URL'))  // session set in buddy-screen
    }, "400");
  }
  </script>

@endsection
@extends('layouts.chat-screens')