@extends('layouts.app')

@section('title', 'Loan')

@section('content')	

<div class="page-wrapper">
	<div class="page-content">
		<!--breadcrumb-->
		<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
			<div class="ps-3">
				<nav aria-label="breadcrumb">
					<ol class="breadcrumb mb-0 p-0">
						<li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i></a></li>
						<li class="breadcrumb-item active" aria-current="page">Loan Calculator</li>
					</ol>                 
                    
				</nav>
			</div>
		</div>
		<!--end breadcrumb-->
        <div class="container">
            <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card card-body text-center mt-5">
                <h1 class="heading display-5 pb-3">Loan Calculator</h1>
                <form id="loan-form">
                    <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">KSH</span>
                        </div>
                        <input type="number" id="amount" placeholder="Loan Amount" class="form-control" name="" value="">
                    </div>
                    </div>
                    
                    <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">Annual Interest Rate %</span>
                        </div>
                        <input type="number" id="interest" placeholder="Interest" class="form-control" name="" value="">
                    </div>
                    </div>
                    <div class="form-group">
                    <div class="input-group">
                        <input type="number" id="months" placeholder="Months To Repay" class="form-control" name="" value="">
                    </div>
                    </div>
                    <div class="form-group">
                    <input type="submit" name="" value="Calculate" class="btn btn-dark btn-block">
                    </div>
                </form>
                <!-- Loader  -->
                <div id="loading">
                    <img src="{{asset('assets/images/Loading_icon.gif')}}" alt="Loading Gif" style="height: 100px;" class="img-fluid">
                </div>
                <!-- Result  -->
                <div id="results" class="pt-4">
                    <h5>Results:</h5>
                    <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">Monthly Payment</span>
                        </div>
                        <input type="number" id="monthly-payment" class="form-control" name="" value="" disabled>
                    </div>
                    </div>

                    <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-prepend">
                        <span class="input-group-text">Total Payment</span>
                        </div>
                        <input type="number" id="total-payment" class="form-control" name="" value="" disabled>
                    </div>
                </div>
                
                <div class="form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                    <span class="input-group-text">Total Interest</span>
                    </div>
                    <input type="number" id="total-interest" class="form-control" name="" value="" disabled>
                </div>
            </div>
         </div>
         </div>
        </div>
    </div>
</div>
<!--end page wrapper -->
@endsection
                
@pushOnce('scripts')
<script>
document.getElementById('loan-form').addEventListener('submit', function(e) {
    e.preventDefault();
    // Hide results
    document.querySelector('#results').style.display = 'none';
    // Show loader
    document.querySelector('#loading').style.display = 'block';
    // Set timer
    setTimeout(calculateResults, 500);
});

function calculateResults(e) {
    // UI Vars
    const amount = document.getElementById('amount');
    const interest = document.getElementById('interest');
    const months = document.getElementById('months');
    const monthlyPayment = document.getElementById('monthly-payment');
    const totalPayment = document.getElementById('total-payment');
    const totalInterest = document.getElementById('total-interest');

    const principal = parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value) / 100 / 12;
    const calculatedPayments = parseFloat(months.value);

    // Compute monthly payments
    const x = Math.pow(1 + calculatedInterest, calculatedPayments);
    const monthly = (principal * x * calculatedInterest) / (x - 1);

    if (isFinite(monthly)) {
    monthlyPayment.value = monthly.toFixed(2);
    totalPayment.value = (monthly * calculatedPayments).toFixed(2);
    totalInterest.value = ((monthly * calculatedPayments) - principal).toFixed(2);
    document.querySelector('#results').style.display = 'block';
    document.querySelector('#loading').style.display = 'none';
    } else {
    showError('Please check your numbers.');
    }
}

// Show Error
function showError(error) {
    // Hide results
    document.querySelector('#results').style.display = 'none';
    // Hide loader
    document.querySelector('#loading').style.display = 'none';
    // Create a div
    const errorDiv = document.createElement('div');
    // Get elements
    const card = document.querySelector('.card');
    const heading = document.querySelector('.heading');
    // Add class
    errorDiv.className = 'alert alert-danger';
    // Create text node and append to div
    errorDiv.appendChild(document.createTextNode(error));
    // Insert error above heading
    card.insertBefore(errorDiv, heading);
    // Clear error after 3 seconds
    setTimeout(clearError, 3000);
}

// Clear error
function clearError() {
    document.querySelector('.alert').remove();
}
</script>
@endpushOnce