@extends('frontend.layouts.master')

@section('content')
    <div class="scheme-detail-hero">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-12">
                    <h1 class="hero-block-content-title text-white pb-1 m-0">EMI CALCULATOR</h1>
                    <div class="breadcrumb-div">
                        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                            <ol class="breadcrumb m-0 d-flex justify-content-center">
                                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}"
                                        class="breadcrumb-item-link fs-5">Home</a></li>
                                <li class="breadcrumb-item fs-5 text-white" aria-current="page">Calculate Your EMI</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-content" style="background: #f2f2f2;">
        <div class="container">
            <div class="section-block">
                <div class="bg p-4">
                    <div class="row">
                        <div class="col-md-6">
                            <h2 class="text-black fw-bolder">Calculate Your EMI</h2>
                            <div class="form-group">
                                <label for="loanAmount" class="text-black fs-5">Loan Amount<span
                                        class="fs-5">*</span></label>
                                <input type="text" class="form-control w-50 m-2 fs-5" id="loanAmountDisplay"
                                    placeholder="₹ 1,00,000" readonly style="font-family: initial;">
                                <input class="mx-2 w-100 px-1" type="range" id="loanAmountSlider" min="1"
                                    max="3000" value="1" onchange="updateLoanAmount()">
                                <input type="hidden" id="loanAmount" value="1">
                            </div>
                            <div class="form-group">
                                <label for="interestRate" class="text-black fs-5">Interest Rate (%)</label>
                                <input type="text" class="form-control w-25 m-2 fs-4" id="interestRateDisplay"
                                    placeholder="1" readonly style="font-family: initial;">
                                <input class="mx-2 w-100 px-1" type="range" id="interestRateSlider" min="1"
                                    max="20" value="1" onchange="updateInterestRate()">
                                <input type="hidden" id="interestRate" value="1">
                            </div>
                            <div class="form-group">
                                <label for="loanTenure" class="text-black fs-5">Loan Tenure (in Years)*</label>
                                <input type="text" class="form-control w-25 m-2 fs-4" id="loanTenureDisplay"
                                    placeholder="1" readonly style="font-family: initial;">
                                <input class="mx-2 w-100 px-1" type="range" id="loanTenureSlider" min="1"
                                    max="30" value="1" onchange="updateLoanTenure()">
                                <input type="hidden" id="loanTenure" value="1">
                            </div>
                            <!-- Remove the button to calculate EMI -->
                        </div>
                        <div class="col-md-6">
                            <div class="card" style="min-height: 100%; padding-left:50px; border-radius:10px;">
                                <div class="card-body">
                                    <h2 class="card-title fw-bolder ">Loan Details</h2>
                                    <p class="card-text fs-5 m-0">Principal Amount</p>
                                    <div class="fw-bolder fs-3"><span id="principalAmount" style="font-family: initial;"></span></div>
                                    <p class="card-text fs-5 m-0">Interest Amount</p>
                                    <div class="fw-bolder fs-3"><span id="interestAmount" style="font-family: initial;"></span></div>
                                    <p class="card-text fs-5 m-0">Total Amount Payable</p>
                                    <div class="fw-bolder fs-3"><span id="totalAmountPayable" style="font-family: initial;"></span></div>
                                    <div class="d-flex justify-content-center mt-3">
                                    <div class="d-flex justify-content-between align-items-center" style="background: #2980b9; padding:12px 40px; border-radius:10px; width:100%;">
                                        <p class="card-text fs-5 m-0 text-center text-white">EMI (Per Year)</p>
                                        <div class="fw-bolder text-center fs-3 text-white" style="font-family: initial;"><span id="emiResult"></span></div>
                                    </div>
                                    </div>   
                                    <div class="d-flex justify-content-center align-items-center mt-3">
                                        <a class="enquiry nav-btn bg-white" href="#"  data-bs-toggle="modal" data-bs-target="#exampleModal">Enquire Now <i class="bi bi-arrow-right ps-2"></i> </a>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enquiry Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mt-5">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="p-3 bg-white enquiry">
                        <h2 class="fw-bold pt-3 pb-3 m-0 fs-4">Enquire Now</h2>
                        <form action="{{ route('enquiry.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <input type="text" name="name" class="form-control mb-4"
                                        placeholder="Your Name *" required="">
                                </div>
                                <div class="col-sm-6">
                                    <input type="email" name="email" class="form-control mb-4"
                                        placeholder="Your Email *" required="">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" name="number" class="form-control mb-4"
                                        placeholder="Your Phone *" required="">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" name="address" class="form-control mb-4"
                                        placeholder="Your Address" required="">
                                </div>
                                <div class="col-sm-12 mb-3">
                                    <select class="form-select form-control" name="loan_type" id="loan_type">
                                        <option value="">Select Loan</option>
                                        <option value="MSME Business Loans">
                                            MSME Business Loans
                                        </option>
                                        <option value="Subsidy & Incentives">Subsidy & Incentives</option>
                                        <option value="Retail Loans">Retail Loans</option>
                                        <option value="Turnkey Projects">Turnkey Projects</option>
                                    </select>
                                </div>
                                <div class="col-sm-12 ">
                                    <textarea name="message" cols="40" rows="4" class="form-control mb-4" placeholder="Message"
                                        required=""></textarea>
                                </div>
                                <div class="send-message">
                                    <button type="submit" class="enquiries nav-btn w-100 border-0 p-3 fs-5">Send
                                        Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function calculateEMI() {
            var loanAmount = parseFloat(document.getElementById("loanAmount").value) * 100000; 
            var interestRate = parseFloat(document.getElementById("interestRate").value);
            var loanTenure = parseInt(document.getElementById("loanTenure").value) * 12; 
            var monthlyInterestRate = (interestRate / 100) / 12;
            var emi = (loanAmount * monthlyInterestRate) / (1 - Math.pow(1 + monthlyInterestRate, -loanTenure));
            emi = Math.round(emi);

            document.getElementById("emiResult").innerText = formatIndianNumber(emi); 
            var principalAmount = loanAmount;
            document.getElementById("principalAmount").innerText = formatIndianNumber(principalAmount);
            var interestAmount = (loanAmount * interestRate) / 100;
            var totalAmountPayable = principalAmount + interestAmount;
            document.getElementById("interestAmount").innerText = formatIndianNumber(interestAmount);
            document.getElementById("totalAmountPayable").innerText = formatIndianNumber(totalAmountPayable);
        }

        function formatIndianNumber(number) {
            var formattedNumber = new Intl.NumberFormat('en-IN', {
                maximumFractionDigits: 2,
                style: 'currency',
                currency: 'INR'
            }).format(number);

            return formattedNumber;
        }

        function initializeEMI() {
            document.getElementById("loanAmountDisplay").value = formatIndianNumber(1 * 100000); 
            document.getElementById("interestRateDisplay").value = 1;
            document.getElementById("loanTenureDisplay").value = 1; 

            calculateEMI();
        }

        function updateLoanAmount() {
            var loanAmount = document.getElementById("loanAmountSlider").value;
            document.getElementById("loanAmount").value = loanAmount;
            document.getElementById("loanAmountDisplay").value = formatIndianNumber(loanAmount * 100000);
            var principalAmount = loanAmount * 100000; // Convert lakh to rupees
            document.getElementById("principalAmount").innerText = formatIndianNumber(principalAmount);
            calculateEMI();
        }

        function updateInterestRate() {
            var interestRate = document.getElementById("interestRateSlider").value;
            document.getElementById("interestRate").value = interestRate;
            document.getElementById("interestRateDisplay").value = interestRate;
            calculateEMI();
        }

        function updateLoanTenure() {
            var loanTenure = document.getElementById("loanTenureSlider").value;
            document.getElementById("loanTenure").value = loanTenure;
            document.getElementById("loanTenureDisplay").value = loanTenure;
            calculateEMI();
        }
        window.onload = initializeEMI;
    </script>
@endsection