@extends('layouts.app')

@section('title', 'emi-calculator')

@section('content')


<?php include 'layouts/header.php'; ?>

<!-- =========================================
     CSS
========================================= -->

<style>

.emi-section {
    background: #f5f7fb;
}

.card {
    background: #fff;
}

.form-range::-webkit-slider-thumb {
    background: #104042;
}

.form-range::-moz-range-thumb {
    background: #104042;
}

.result-box {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
}

.result-box h6 {
    font-size: 14px;
    color: #777;
}

.result-box h5 {
    font-weight: 700;
    margin-top: 8px;
}

#emiValue {
    font-size: 42px;color: #104042;
}

</style>

<!-- =========================================
     EMI CALCULATOR SECTION
========================================= -->

<section class="py-5 emi-section">
    <div class="container">
        <div class="row justify-content-center">

            <div class="col-lg-8">

                <div class="card border-0 shadow-lg rounded-4 p-4">

                    <!-- Heading -->
                    <div class="text-center mb-4">
                        <h2 class="fw-bold">Loan EMI Calculator</h2>
                        <p class="text-muted mb-0">
                            Calculate your monthly EMI instantly for your loan application.
                        </p>
                    </div>

                    <!-- Loan Amount -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            Loan Amount (₹)
                        </label>

                        <input type="range"
                               class="form-range"
                               min="50000"
                               max="5000000"
                               step="10000"
                               id="loanAmountRange">

                        <div class="d-flex justify-content-between">
                            <span>₹50K</span>
                            <span id="loanAmountValue">₹5,00,000</span>
                            <span>₹50L</span>
                        </div>
                    </div>

                    <!-- Interest Rate -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            Interest Rate (%)
                        </label>

                        <input type="range"
                               class="form-range"
                               min="1"
                               max="20"
                               step="0.1"
                               id="interestRateRange">

                        <div class="d-flex justify-content-between">
                            <span>1%</span>
                            <span id="interestRateValue">8.5%</span>
                            <span>20%</span>
                        </div>
                    </div>

                    <!-- Loan Tenure -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            Loan Tenure (Years)
                        </label>

                        <input type="range"
                               class="form-range"
                               min="1"
                               max="30"
                               step="1"
                               id="loanTenureRange">

                        <div class="d-flex justify-content-between">
                            <span>1 Year</span>
                            <span id="loanTenureValue">5 Years</span>
                            <span>30 Years</span>
                        </div>
                    </div>

                    <!-- EMI Result -->
                    <div class="emi-result text-center mt-5">

                        <h6 class="text-muted mb-2">
                            Monthly EMI
                        </h6>

                        <h1 class="fw-bold mb-3" id="emiValue">
                            ₹10,250
                        </h1>

                        <div class="row text-center g-3 mt-4">

                            <div class="col-md-4">
                                <div class="result-box p-3 rounded-3">
                                    <h6>Total Interest</h6>
                                    <h5 id="totalInterest">₹1,15,000</h5>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="result-box p-3 rounded-3">
                                    <h6>Total Payment</h6>
                                    <h5 id="totalPayment">₹6,15,000</h5>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="result-box p-3 rounded-3">
                                    <h6>Loan Amount</h6>
                                    <h5 id="finalLoanAmount">₹5,00,000</h5>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>
    </div>
</section>



<?php include 'layouts/footer.php'; ?>

<!-- =========================================
     JAVASCRIPT
========================================= -->

<script>

const loanAmountRange = document.getElementById('loanAmountRange');
const interestRateRange = document.getElementById('interestRateRange');
const loanTenureRange = document.getElementById('loanTenureRange');

loanAmountRange.value = 500000;
interestRateRange.value = 8.5;
loanTenureRange.value = 5;

function calculateEMI() {

    const principal = parseFloat(loanAmountRange.value);
    const annualInterest = parseFloat(interestRateRange.value);
    const tenureYears = parseFloat(loanTenureRange.value);

    const monthlyInterest = annualInterest / 12 / 100;
    const months = tenureYears * 12;

    const emi =
        (principal * monthlyInterest * Math.pow(1 + monthlyInterest, months)) /
        (Math.pow(1 + monthlyInterest, months) - 1);

    const totalPayment = emi * months;
    const totalInterest = totalPayment - principal;

    document.getElementById('loanAmountValue').innerText =
        '₹' + principal.toLocaleString();

    document.getElementById('interestRateValue').innerText =
        annualInterest + '%';

    document.getElementById('loanTenureValue').innerText =
        tenureYears + ' Years';

    document.getElementById('emiValue').innerText =
        '₹' + Math.round(emi).toLocaleString();

    document.getElementById('totalInterest').innerText =
        '₹' + Math.round(totalInterest).toLocaleString();

    document.getElementById('totalPayment').innerText =
        '₹' + Math.round(totalPayment).toLocaleString();

    document.getElementById('finalLoanAmount').innerText =
        '₹' + principal.toLocaleString();
}

loanAmountRange.addEventListener('input', calculateEMI);
interestRateRange.addEventListener('input', calculateEMI);
loanTenureRange.addEventListener('input', calculateEMI);

calculateEMI();

</script>

@endsection
