Spaces:

fernando-bold
/

solarfin-simulator

Running

import { useState } from "react";

d1848f7 verified 12 months ago

4.19 kB

document.addEventListener('DOMContentLoaded', function() {
    // Range input value updaters
    const rangeInputs = document.querySelectorAll('input[type="range"]');
    
    rangeInputs.forEach(input => {
        const valueDisplay = input.nextElementSibling.querySelector('span');
        const min = parseInt(input.min);
        const max = parseInt(input.max);
        
        // Initial value display
        if (input.id === 'termMonths') {
            const years = Math.round(input.value / 12);
            valueDisplay.textContent = `${input.value} months (${years} years)`;
        } else if (input.id === 'downPaymentPercent') {
            valueDisplay.textContent = `${input.value}%`;
        } else {
            valueDisplay.textContent = input.value;
        }
        
        // Update on change
        input.addEventListener('input', function() {
            if (this.id === 'termMonths') {
                const years = Math.round(this.value / 12);
                valueDisplay.textContent = `${this.value} months (${years} years)`;
            } else if (this.id === 'downPaymentPercent') {
                valueDisplay.textContent = `${this.value}%`;
            } else {
                valueDisplay.textContent = this.value;
            }
        });
    });

    // Simulate button click handler
    const simulateBtn = document.querySelector('.bg-gradient-to-r.from-green-500');
    if (simulateBtn) {
        simulateBtn.addEventListener('click', function() {
            // Show loading state
            this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Calculating...';
            feather.replace();
            
            // Simulate API call delay
            setTimeout(() => {
                // Scroll to results section
                document.querySelector('.lg\\:col-span-2').scrollIntoView({ 
                    behavior: 'smooth' 
                });
                
                // Reset button text
                this.textContent = 'Calculate Options';
            }, 1500);
        });
    }

    // Option selection handler
    const optionSelectBtns = document.querySelectorAll('.border.border-gray-200 button');
    optionSelectBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // Remove selected state from all options
            optionSelectBtns.forEach(b => {
                b.classList.remove('bg-green-500', 'hover:bg-green-600', 'text-white');
                b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
                b.textContent = 'Select';
            });
            
            // Add selected state to clicked option
            this.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
            this.classList.add('bg-green-500', 'hover:bg-green-600', 'text-white');
            this.textContent = 'Selected';
            
            // Show next steps (simulated)
            const nextSteps = document.createElement('div');
            nextSteps.className = 'mt-8 bg-green-50 border border-green-200 rounded-xl p-6';
            nextSteps.innerHTML = `
                <h3 class="text-lg font-bold text-green-800 mb-2">Next Steps</h3>
                <p class="text-green-700 mb-4">Your selected financing option has been saved. Click below to proceed with your application.</p>
                <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg">
                    Continue Application
                </button>
            `;
            
            // Remove existing next steps if any
            const existing = document.querySelector('.bg-green-50.border-green-200');
            if (existing) existing.remove();
            
            // Insert next steps after options
            document.querySelector('.space-y-4').insertAdjacentElement('afterend', nextSteps);
            
            // Add click handler for continue button
            nextSteps.querySelector('button').addEventListener('click', function() {
                alert('Application process would continue here in a real implementation.');
            });
        });
    });
});

	document.addEventListener('DOMContentLoaded', function() {
	// Range input value updaters
	const rangeInputs = document.querySelectorAll('input[type="range"]');

	rangeInputs.forEach(input => {
	const valueDisplay = input.nextElementSibling.querySelector('span');
	const min = parseInt(input.min);
	const max = parseInt(input.max);

	// Initial value display
	if (input.id === 'termMonths') {
	const years = Math.round(input.value / 12);
	valueDisplay.textContent = `${input.value} months (${years} years)`;
	} else if (input.id === 'downPaymentPercent') {
	valueDisplay.textContent = `${input.value}%`;
	} else {
	valueDisplay.textContent = input.value;
	}

	// Update on change
	input.addEventListener('input', function() {
	if (this.id === 'termMonths') {
	const years = Math.round(this.value / 12);
	valueDisplay.textContent = `${this.value} months (${years} years)`;
	} else if (this.id === 'downPaymentPercent') {
	valueDisplay.textContent = `${this.value}%`;
	} else {
	valueDisplay.textContent = this.value;
	}
	});
	});

	// Simulate button click handler
	const simulateBtn = document.querySelector('.bg-gradient-to-r.from-green-500');
	if (simulateBtn) {
	simulateBtn.addEventListener('click', function() {
	// Show loading state
	this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Calculating...';
	feather.replace();

	// Simulate API call delay
	setTimeout(() => {
	// Scroll to results section
	document.querySelector('.lg\\:col-span-2').scrollIntoView({
	behavior: 'smooth'
	});

	// Reset button text
	this.textContent = 'Calculate Options';
	}, 1500);
	});
	}

	// Option selection handler
	const optionSelectBtns = document.querySelectorAll('.border.border-gray-200 button');
	optionSelectBtns.forEach(btn => {
	btn.addEventListener('click', function() {
	// Remove selected state from all options
	optionSelectBtns.forEach(b => {
	b.classList.remove('bg-green-500', 'hover:bg-green-600', 'text-white');
	b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
	b.textContent = 'Select';
	});

	// Add selected state to clicked option
	this.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'text-gray-800');
	this.classList.add('bg-green-500', 'hover:bg-green-600', 'text-white');
	this.textContent = 'Selected';

	// Show next steps (simulated)
	const nextSteps = document.createElement('div');
	nextSteps.className = 'mt-8 bg-green-50 border border-green-200 rounded-xl p-6';
	nextSteps.innerHTML = `
	<h3 class="text-lg font-bold text-green-800 mb-2">Next Steps</h3>
	<p class="text-green-700 mb-4">Your selected financing option has been saved. Click below to proceed with your application.</p>
	<button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg">
	Continue Application
	</button>
	`;

	// Remove existing next steps if any
	const existing = document.querySelector('.bg-green-50.border-green-200');
	if (existing) existing.remove();

	// Insert next steps after options
	document.querySelector('.space-y-4').insertAdjacentElement('afterend', nextSteps);

	// Add click handler for continue button
	nextSteps.querySelector('button').addEventListener('click', function() {
	alert('Application process would continue here in a real implementation.');
	});
	});
	});
	});