nokker
e95a019300
- Add CSS rules to prevent invisible elements from flashing during page load - Fix vehicle section display conflicts with JavaScript enabling - Ensure calculate button can be properly enabled when requirements are met - Fix results section display after calculation completion - Remove !important declarations that blocked JavaScript functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2274 lines
114 KiB
HTML
2274 lines
114 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Company Car Tax Calculator | Belgium</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
color: #212529;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding: 48px 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.language-selector {
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 40px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.language-btn {
|
|
background: none;
|
|
border: 1px solid #dee2e6;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.language-btn.active {
|
|
background: #212529;
|
|
color: white;
|
|
border-color: #212529;
|
|
}
|
|
|
|
.language-btn:hover {
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
letter-spacing: -0.5px;
|
|
color: #212529;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1rem;
|
|
color: #6c757d;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.content {
|
|
padding: 40px;
|
|
}
|
|
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* Prevent FOUC - hide elements that should be initially hidden */
|
|
#vehicle-section {
|
|
display: none;
|
|
}
|
|
|
|
#advanced-calculated-container,
|
|
#mobility-budget-comparison,
|
|
#yearly-breakdown {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure results can be shown when needed */
|
|
.results {
|
|
display: none;
|
|
}
|
|
|
|
#calculate-section {
|
|
opacity: 0.3 !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#advanced-content,
|
|
#calculated-content {
|
|
display: none !important;
|
|
}
|
|
|
|
.input-section {
|
|
background: white;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 32px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
color: #212529;
|
|
margin-bottom: 24px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.input-group label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: #495057;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.2px;
|
|
}
|
|
|
|
.input-group input, .input-group select {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
font-size: 0.95rem;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
background: white;
|
|
}
|
|
|
|
.input-group input:focus, .input-group select:focus {
|
|
outline: none;
|
|
border-color: #495057;
|
|
box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.08);
|
|
}
|
|
|
|
.input-group small {
|
|
display: block;
|
|
margin-top: 6px;
|
|
color: #6c757d;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.input-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
font-size: 0.9rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.calculate-btn {
|
|
background: #212529;
|
|
color: white;
|
|
border: none;
|
|
padding: 14px 36px;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
display: block;
|
|
margin: 40px auto;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.calculate-btn:hover {
|
|
background: #343a40;
|
|
}
|
|
|
|
.calculate-btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.add-vehicle-btn {
|
|
background: #6c757d;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.add-vehicle-btn:hover {
|
|
background: #5a6268;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
|
|
}
|
|
|
|
.add-vehicle-btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.go-back-btn {
|
|
background: #f8f9fa;
|
|
color: #495057;
|
|
border: 1px solid #dee2e6;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.go-back-btn:hover {
|
|
background: #e9ecef;
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.custom-car-section {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
|
|
.vehicle-dropdown {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
font-size: 0.95rem;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
background: white;
|
|
}
|
|
|
|
.vehicle-dropdown:disabled {
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.vehicle-dropdown:focus {
|
|
outline: none;
|
|
border-color: #495057;
|
|
box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.08);
|
|
}
|
|
|
|
.manual-fields {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-top: none;
|
|
border-radius: 0 0 4px 4px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.search-result-item {
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.search-result-item:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.search-result-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.search-filters {
|
|
margin-bottom: 16px;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 1px solid #dee2e6;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.filter-group label {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.filter-dropdown {
|
|
padding: 8px 12px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
background: white;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.filter-dropdown:focus {
|
|
outline: none;
|
|
border-color: #495057;
|
|
box-shadow: 0 0 0 2px rgba(73, 80, 87, 0.08);
|
|
}
|
|
|
|
.result-main {
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.result-variant {
|
|
color: #6c757d;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.result-year {
|
|
color: #495057;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.result-details {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.vehicle-search-input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
font-size: 0.95rem;
|
|
transition: border-color 0.15s, box-shadow 0.15s;
|
|
background: white;
|
|
}
|
|
|
|
.vehicle-search-input:focus {
|
|
outline: none;
|
|
border-color: #495057;
|
|
box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.08);
|
|
}
|
|
|
|
.vehicle-search-input:disabled {
|
|
background: #f8f9fa;
|
|
color: #6c757d;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.vehicle-search-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-top: none;
|
|
border-radius: 0 0 6px 6px;
|
|
max-height: 320px;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.vehicle-search-container {
|
|
position: relative;
|
|
}
|
|
|
|
.results {
|
|
display: none;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.car-comparison {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.car-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
transition: box-shadow 0.2s;
|
|
}
|
|
|
|
.car-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.car-card.cheap {
|
|
border-top: 3px solid #28a745;
|
|
}
|
|
|
|
.car-card.middle {
|
|
border-top: 3px solid #ffc107;
|
|
}
|
|
|
|
.car-card.expensive {
|
|
border-top: 3px solid #dc3545;
|
|
}
|
|
|
|
.car-card.electric {
|
|
border-top: 3px solid #0dcaf0;
|
|
}
|
|
|
|
.car-card.custom {
|
|
border-top: 3px solid #6610f2;
|
|
}
|
|
|
|
.car-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: #212529;
|
|
}
|
|
|
|
.car-subtitle {
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
}
|
|
|
|
.car-details {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-label {
|
|
color: #6c757d;
|
|
}
|
|
|
|
.detail-value {
|
|
font-weight: 500;
|
|
color: #212529;
|
|
text-align: right;
|
|
}
|
|
|
|
.highlight {
|
|
background: #fff3cd;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.pension-loss {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.monthly-loss-box {
|
|
background: #f8f9fa;
|
|
margin: 20px -8px 0;
|
|
padding: 16px;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.monthly-loss-box .detail-row:first-child .detail-value {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.summary {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 32px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.summary h3 {
|
|
color: #212529;
|
|
margin-bottom: 24px;
|
|
font-size: 1.3rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.summary-item {
|
|
text-align: center;
|
|
padding: 24px;
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.summary-label {
|
|
color: #6c757d;
|
|
font-size: 0.85rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.info-box {
|
|
background: #f8f9fa;
|
|
border-left: 3px solid #6c757d;
|
|
padding: 24px;
|
|
margin: 24px 0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.info-box h4 {
|
|
color: #212529;
|
|
margin-bottom: 12px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-box p {
|
|
color: #495057;
|
|
line-height: 1.7;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.info-box.warning {
|
|
background: #fff3cd;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.chart-container {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
.projection-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.projection-table th {
|
|
background: #f8f9fa;
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
border-bottom: 2px solid #dee2e6;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.projection-table td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.projection-table tr:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.badge-electric {
|
|
background: #e7f5ff;
|
|
color: #1971c2;
|
|
}
|
|
|
|
.badge-new {
|
|
background: #f3f0ff;
|
|
color: #6741d9;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.input-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.car-comparison {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.language-selector {
|
|
position: static;
|
|
margin-bottom: 20px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="language-selector">
|
|
<button class="language-btn active" onclick="switchLanguage('en')">EN</button>
|
|
<button class="language-btn" onclick="switchLanguage('fr')">FR</button>
|
|
<button class="language-btn" onclick="switchLanguage('nl')">NL</button>
|
|
</div>
|
|
<h1 data-i18n="title">Company Car Tax Calculator</h1>
|
|
<p data-i18n="subtitle">Calculate pension impact for company cars in Belgium</p>
|
|
|
|
<div class="disclaimer-notice" style="margin: 20px 0; padding: 16px; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; font-size: 0.9rem; color: #856404;">
|
|
<strong>⚠️ <span data-i18n="disclaimer.title">Important Notice</span>:</strong>
|
|
<span data-i18n="disclaimer.text">This calculator provides estimates based on current regulations and market data. Vehicle prices and specifications may vary. Always consult with a tax professional or HR department for official calculations. Last updated: August 2025.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="main-content">
|
|
|
|
<!-- Essential Information - Most Important Fields -->
|
|
<div class="input-section" id="essential-section" style="border: 2px solid #059669; background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);">
|
|
<div class="section-title" style="color: #059669;" data-i18n="section.essential">🎯 Essential Information - Fill These First</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="gross-salary" data-i18n="label.grossSalary">Gross Monthly Salary *</label>
|
|
<input type="number" id="gross-salary" placeholder="4500" min="1800" max="25000" required>
|
|
<small data-i18n="help.grossSalary">Your current gross monthly salary in EUR</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="current-age" data-i18n="label.currentAge">Current Age *</label>
|
|
<input type="number" id="current-age" placeholder="35" min="20" max="65" required>
|
|
<small data-i18n="help.currentAge">Your age today</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="marital-status" data-i18n="label.maritalStatus">Marital Status *</label>
|
|
<select id="marital-status" required>
|
|
<option value="" disabled selected data-i18n="placeholder.maritalStatus">Choose your status...</option>
|
|
<option value="single" data-i18n="option.single">Single</option>
|
|
<option value="married" data-i18n="option.married">Married (spouse no income)</option>
|
|
<option value="cohabiting" data-i18n="option.cohabiting">Legal Cohabitation</option>
|
|
<option value="divorced" data-i18n="option.divorced">Divorced</option>
|
|
<option value="married-dual" data-i18n="option.marriedDual">Married (both working)</option>
|
|
</select>
|
|
<small data-i18n="help.maritalStatus">Affects pension calculation rate</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="tax-rate" data-i18n="label.taxRate">Income Tax Rate *</label>
|
|
<input type="number" id="tax-rate" placeholder="45" min="25" max="50" step="0.5" required>
|
|
<small data-i18n="help.taxRate">Your marginal tax rate percentage</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="lease-duration" data-i18n="label.leaseDuration">Company Car Duration *</label>
|
|
<select id="lease-duration" required>
|
|
<option value="" disabled selected data-i18n="placeholder.leaseDuration">How long will you have it?</option>
|
|
<option value="3">3 years</option>
|
|
<option value="4">4 years</option>
|
|
<option value="5">5 years</option>
|
|
<option value="7">7 years</option>
|
|
<option value="10">10 years</option>
|
|
<option value="0" data-i18n="option.untilRetirement">Until Retirement</option>
|
|
</select>
|
|
<small data-i18n="help.leaseDuration">How long you'll have the company car</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vehicle Selection -->
|
|
<div class="input-section" id="vehicle-section" style="border: 1px solid #e5e7eb; background: #f9fafb; opacity: 0.6; transition: all 0.3s ease;">
|
|
<div class="section-title" style="color: #6b7280;" data-i18n="section.vehicles">🚗 Select Your Company Car</div>
|
|
<div id="vehicle-autocomplete-container"></div>
|
|
<div id="custom-cars-list" style="margin-top: 24px;"></div>
|
|
</div>
|
|
|
|
<!-- Advanced Options and Calculated Parameters - Responsive Layout -->
|
|
<div id="advanced-calculated-container" style="display: none; margin: 32px 0;">
|
|
<div style="display: grid; grid-template-columns: 1fr; gap: 24px;">
|
|
<!-- Mobile-first: stack vertically by default -->
|
|
<style>
|
|
/* Mobile-first responsive design */
|
|
@media (min-width: 768px) {
|
|
#advanced-calculated-container > div {
|
|
grid-template-columns: 1fr 1fr !important;
|
|
}
|
|
}
|
|
|
|
/* Mobile touch improvements */
|
|
@media (max-width: 767px) {
|
|
.collapsible-header {
|
|
padding: 20px 16px !important;
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.input-group input, .input-group select {
|
|
padding: 12px !important;
|
|
font-size: 16px !important; /* Prevents zoom on iOS */
|
|
}
|
|
|
|
.checkbox-group {
|
|
padding: 12px 8px !important;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
font-size: 15px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Advanced Options (Collapsible) -->
|
|
<div id="advanced-section" class="input-section" style="margin: 0;">
|
|
<div class="section-title collapsible-header" onclick="toggleAdvancedOptions()" style="cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 0;">
|
|
<span data-i18n="section.advancedOptions">⚙️ Advanced Options</span>
|
|
<span id="advanced-toggle" style="font-size: 1.2rem; transition: transform 0.3s ease;">▼</span>
|
|
</div>
|
|
<div id="advanced-content" style="display: none; padding: 20px; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; background: white;">
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="salary-growth" data-i18n="label.salaryGrowth">Annual Salary Growth</label>
|
|
<input type="number" id="salary-growth" value="2.5" min="0" max="10" step="0.5">
|
|
<small data-i18n="help.salaryGrowth">Expected annual salary increase percentage</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="inflation" data-i18n="label.inflation">Annual Inflation Rate</label>
|
|
<input type="number" id="inflation" value="2.0" min="0" max="10" step="0.5">
|
|
<small data-i18n="help.inflation">Expected annual inflation rate percentage</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="discount-rate" data-i18n="label.discountRate">Discount Rate</label>
|
|
<input type="number" id="discount-rate" value="3.0" min="0" max="10" step="0.5">
|
|
<small data-i18n="help.discountRate">For present value calculations percentage</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="employer-pension" data-i18n="label.employerPension">Additional Employer Pension</label>
|
|
<input type="number" id="employer-pension" value="0" min="0" max="20" step="0.5">
|
|
<small data-i18n="help.employerPension">Additional employer pension percentage</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-title" style="margin-top: 24px;" data-i18n="section.options">Display Options</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr; gap: 16px;">
|
|
<style>
|
|
@media (min-width: 640px) {
|
|
.display-options-grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.display-options-grid {
|
|
grid-template-columns: repeat(3, 1fr) !important;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="display-options-grid" style="display: grid; grid-template-columns: 1fr; gap: 12px;">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="include-inflation" checked>
|
|
<label for="include-inflation" data-i18n="option.includeInflation">Adjust for inflation in calculations</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="include-present-value" checked>
|
|
<label for="include-present-value" data-i18n="option.includePresentValue">Show present value of losses</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="include-electric" checked>
|
|
<label for="include-electric" data-i18n="option.includeElectric">Include electric vehicle comparison</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="show-yearly-breakdown">
|
|
<label for="show-yearly-breakdown" data-i18n="option.showYearlyBreakdown">Show year-by-year breakdown</label>
|
|
</div>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="mobility-budget">
|
|
<label for="mobility-budget" data-i18n="option.mobilityBudget">Compare with mobility budget</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculated Parameters (Collapsible) -->
|
|
<div id="calculated-section" class="input-section" style="margin: 0;">
|
|
<div class="section-title collapsible-header" onclick="toggleCalculatedParams()" style="cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 0;">
|
|
<span data-i18n="section.calculated">Calculated Parameters (Adjustable)</span>
|
|
<span id="calculated-toggle" style="font-size: 1.2rem; transition: transform 0.3s ease;">▼</span>
|
|
</div>
|
|
<div id="calculated-content" style="display: none; padding: 20px; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; background: white;">
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="retirement-age" data-i18n="label.retirementAge">Retirement Age</label>
|
|
<input type="number" id="retirement-age" value="67" min="60" max="70">
|
|
<small data-i18n="help.retirementAge">Expected retirement age</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="years-work" data-i18n="label.yearsWork">Years to Work</label>
|
|
<input type="number" id="years-work" value="32" min="1" max="45">
|
|
<small data-i18n="help.yearsWork">Auto-calculated from age difference</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="retirement-years" data-i18n="label.retirementYears">Years in Retirement</label>
|
|
<input type="number" id="retirement-years" value="20" min="10" max="35">
|
|
<small data-i18n="help.retirementYears">Expected years receiving pension</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="life-expectancy" data-i18n="label.lifeExpectancy">Life Expectancy</label>
|
|
<input type="number" id="life-expectancy" value="82" min="75" max="95">
|
|
<small data-i18n="help.lifeExpectancy">Updates retirement years automatically</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculate Button - Initially Hidden -->
|
|
<div id="calculate-section" style="text-align: center; margin: 32px 0; opacity: 0.3; transition: all 0.3s ease;">
|
|
<button id="calculate-btn" class="calculate-btn" onclick="calculatePensionLoss()" disabled
|
|
style="background: #d1d5db; border: none; color: #9ca3af; padding: 16px 48px; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: not-allowed; transition: all 0.3s ease;"
|
|
data-i18n="button.calculate">Calculate Pension Impact</button>
|
|
</div>
|
|
|
|
|
|
<div class="results" id="results">
|
|
<div class="info-box">
|
|
<h4 data-i18n="results.howItWorks">How This Calculation Works</h4>
|
|
<p data-i18n="results.explanation">Company vehicles in Belgium are taxed as "Benefit in Kind" (BIK). While you pay income tax on this benefit, no social security contributions (RSZ) are paid, meaning it doesn't count toward your pension calculation.</p>
|
|
<p style="margin-top: 12px;" data-i18n="results.result">Result: You'll receive less monthly pension during retirement. See below for the exact impact per vehicle type.</p>
|
|
</div>
|
|
|
|
<h2 style="margin-bottom: 24px; color: #212529; font-weight: 500; font-size: 1.4rem;" data-i18n="results.title">Monthly Pension Impact by Vehicle Type</h2>
|
|
|
|
<div class="car-comparison" id="car-comparison">
|
|
<!-- Car cards will be inserted here -->
|
|
</div>
|
|
|
|
<div id="mobility-budget-comparison" style="display: none;">
|
|
<!-- Mobility budget comparison will be inserted here -->
|
|
</div>
|
|
|
|
<div class="summary" id="summary">
|
|
<!-- Summary will be inserted here -->
|
|
</div>
|
|
|
|
<div class="chart-container" id="yearly-breakdown" style="display: none;">
|
|
<h3 style="margin-bottom: 20px; color: #212529; font-weight: 500;" data-i18n="chart.title">Year-by-Year Projection</h3>
|
|
<table class="projection-table" id="projection-table">
|
|
<!-- Table will be inserted here -->
|
|
</table>
|
|
</div>
|
|
|
|
<div class="info-box" style="margin-top: 32px;">
|
|
<h4 data-i18n="assumptions.title">Calculation Assumptions</h4>
|
|
<p data-i18n="assumptions.details">• Pension calculation: 75% (married with dependent spouse) or 60% (all other statuses) of average career salary<br>
|
|
• Employee RSZ contribution: 13.07% (7.5% for pension)<br>
|
|
• CO2 coefficients for 2025: Diesel 67g/km, Petrol 82g/km<br>
|
|
• Minimum BIK: €1,650/year<br>
|
|
• Electric vehicles: 4% coefficient (minimum)<br>
|
|
• Solidarity contribution factor 2025: 2.75x<br>
|
|
• Calculations based on current regulations</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="vehicle-database.js"></script>
|
|
<script src="vehicle-search.js"></script>
|
|
<script>
|
|
let customCars = [];
|
|
let currentLanguage = 'en';
|
|
let vehicleAutocomplete;
|
|
|
|
const translations = {
|
|
en: {
|
|
title: "Company Car Tax Calculator",
|
|
subtitle: "Calculate pension impact for company cars in Belgium",
|
|
"disclaimer.title": "Important Notice",
|
|
"disclaimer.text": "This calculator provides estimates based on current regulations and market data. Vehicle prices and specifications may vary. Always consult with a tax professional or HR department for official calculations. Last updated: August 2025.",
|
|
"tab.basic": "Setup",
|
|
"tab.advanced": "Options",
|
|
"tab.custom": "Cars",
|
|
"section.essential": "🎯 Essential Information - Fill These First",
|
|
"section.vehicles": "🚗 Select Your Company Car",
|
|
"section.additional": "📊 Additional Information",
|
|
"section.calculated": "Calculated Parameters (Adjustable)",
|
|
"section.advancedOptions": "Advanced Options",
|
|
"section.options": "Display Options",
|
|
"section.personal": "Personal Information",
|
|
"section.time": "Time Parameters",
|
|
"section.growth": "Growth & Inflation Parameters",
|
|
"section.company": "Company Contributions",
|
|
"section.customVehicle": "Add Custom Vehicle",
|
|
"section.presetVehicles": "Preset Vehicles",
|
|
"label.grossSalary": "Gross Monthly Salary",
|
|
"label.maritalStatus": "Marital Status",
|
|
"label.taxRate": "Income Tax Rate",
|
|
"label.currentAge": "Current Age",
|
|
"label.retirementAge": "Retirement Age",
|
|
"label.yearsWork": "Years to Work",
|
|
"label.leaseDuration": "Company Car Duration",
|
|
"label.retirementYears": "Years in Retirement",
|
|
"label.lifeExpectancy": "Life Expectancy",
|
|
"label.salaryGrowth": "Annual Salary Growth",
|
|
"label.inflation": "Annual Inflation",
|
|
"label.discountRate": "Discount Rate",
|
|
"label.employerPension": "Employer Pension Contribution",
|
|
"label.mobilityBudget": "Consider Mobility Budget",
|
|
"label.vehicleModel": "Vehicle Model",
|
|
"label.listPrice": "List Price",
|
|
"label.co2Emissions": "CO2 Emissions",
|
|
"label.fuelType": "Fuel Type",
|
|
"help.grossSalary": "Your current gross monthly salary in EUR",
|
|
"help.maritalStatus": "Affects pension calculation rate",
|
|
"help.taxRate": "Your marginal tax rate percentage",
|
|
"help.currentAge": "Your age today",
|
|
"help.retirementAge": "Expected retirement age",
|
|
"help.yearsWork": "Automatically calculated",
|
|
"help.leaseDuration": "How long you'll have the company car",
|
|
"help.retirementYears": "Expected years receiving pension",
|
|
"help.lifeExpectancy": "Updates retirement years automatically",
|
|
"help.salaryGrowth": "Expected annual salary increase percentage",
|
|
"help.inflation": "Expected annual inflation rate percentage",
|
|
"help.discountRate": "For present value calculations percentage",
|
|
"help.employerPension": "Additional employer pension percentage",
|
|
"help.mobilityBudget": "38.07% contribution for pension rights",
|
|
"option.single": "Single",
|
|
"option.married": "Married (spouse no income)",
|
|
"option.cohabiting": "Legal Cohabitation",
|
|
"option.divorced": "Divorced",
|
|
"option.marriedDual": "Married (both working)",
|
|
"option.no": "No",
|
|
"option.yes": "Yes - Show comparison",
|
|
"option.untilRetirement": "Until Retirement",
|
|
"placeholder.maritalStatus": "Choose your status...",
|
|
"placeholder.leaseDuration": "How long will you have it?",
|
|
"option.includeInflation": "Adjust for inflation in calculations",
|
|
"option.includePresentValue": "Show present value of losses",
|
|
"option.includeElectric": "Include electric vehicle comparison",
|
|
"option.showYearlyBreakdown": "Show year-by-year breakdown",
|
|
"fuel.electric": "Electric",
|
|
"fuel.petrol": "Petrol",
|
|
"fuel.diesel": "Diesel",
|
|
"fuel.hybrid": "Hybrid",
|
|
"preset.economy": "Economy (€25,000 - Compact vehicles)",
|
|
"preset.middle": "Middle Range (€45,000 - Mid-size vehicles)",
|
|
"preset.premium": "Premium (€75,000 - Executive vehicles)",
|
|
"preset.electric": "Electric (€55,000 - Zero emission vehicles)",
|
|
"button.addVehicle": "Add Vehicle",
|
|
"button.calculate": "Calculate Pension Impact",
|
|
"button.goBack": "← Back to Setup",
|
|
"placeholder.vehicleModel": "e.g., Tesla Model 3",
|
|
"placeholder.co2": "0 for electric",
|
|
"results.howItWorks": "How This Calculation Works",
|
|
"results.explanation": "Company vehicles in Belgium are taxed as \"Benefit in Kind\" (BIK). While you pay income tax on this benefit, no social security contributions (RSZ) are paid, meaning it doesn't count toward your pension calculation.",
|
|
"results.result": "Result: You'll receive less monthly pension during retirement. See below for the exact impact per vehicle type.",
|
|
"results.title": "Monthly Pension Impact by Vehicle Type",
|
|
"chart.title": "Year-by-Year Projection",
|
|
"assumptions.title": "Calculation Assumptions",
|
|
"assumptions.details": "• Pension calculation: 75% (married with dependent spouse) or 60% (all other statuses) of average career salary<br>• Employee RSZ contribution: 13.07% (7.5% for pension)<br>• CO2 coefficients for 2025: Diesel 67g/km, Petrol 82g/km<br>• Minimum BIK: €1,650/year<br>• Electric vehicles: 4% coefficient (minimum)<br>• Solidarity contribution factor 2025: 2.75x<br>• Calculations based on current regulations",
|
|
"filter.year": "Year",
|
|
"filter.fuelType": "Fuel Type",
|
|
"filter.priceRange": "Price Range",
|
|
"filter.allYears": "All Years",
|
|
"filter.allFuelTypes": "All Fuel Types",
|
|
"filter.allPrices": "All Prices",
|
|
"filter.electric": "⚡ Electric",
|
|
"filter.hybrid": "🔋 Hybrid",
|
|
"filter.petrol": "⛽ Petrol",
|
|
"filter.diesel": "🛢️ Diesel",
|
|
"filter.under30k": "Under €30,000",
|
|
"filter.30k50k": "€30,000 - €50,000",
|
|
"filter.50k75k": "€50,000 - €75,000",
|
|
"filter.75k100k": "€75,000 - €100,000",
|
|
"filter.above100k": "Above €100,000",
|
|
"search.placeholder": "Type to search... (e.g., BMW X1, Mercedes C200, Audi Q5)",
|
|
"search.label": "Search Vehicle",
|
|
"manual.override": "Enter vehicle details manually",
|
|
"manual.vehicleName": "Vehicle Name",
|
|
"manual.listPrice": "List Price (€)",
|
|
"manual.co2Emissions": "CO2 Emissions (g/km)",
|
|
"manual.fuelType": "Fuel Type",
|
|
"units.perMonth": "/month",
|
|
"units.perMo": "/mo"
|
|
},
|
|
fr: {
|
|
title: "Calculateur d'Impôt sur les Voitures de Société",
|
|
subtitle: "Calculez l'impact sur la pension des voitures de société en Belgique",
|
|
"disclaimer.title": "Avis Important",
|
|
"disclaimer.text": "Ce calculateur fournit des estimations basées sur la réglementation actuelle et les données du marché. Les prix et spécifications des véhicules peuvent varier. Consultez toujours un professionnel fiscal ou votre service RH pour des calculs officiels. Dernière mise à jour: Août 2025.",
|
|
"tab.basic": "Config",
|
|
"tab.advanced": "Options",
|
|
"tab.custom": "Véhicules",
|
|
"section.essential": "🎯 Informations Essentielles - Remplir en Premier",
|
|
"section.vehicles": "🚗 Sélectionnez votre Voiture de Société",
|
|
"section.additional": "📊 Informations Supplémentaires",
|
|
"section.calculated": "Paramètres Calculés (Ajustables)",
|
|
"section.advancedOptions": "Options Avancées",
|
|
"section.options": "Options d'Affichage",
|
|
"section.personal": "Informations Personnelles",
|
|
"section.time": "Paramètres Temporels",
|
|
"section.growth": "Paramètres de Croissance et d'Inflation",
|
|
"section.company": "Contributions de l'Entreprise",
|
|
"section.customVehicle": "Ajouter un Véhicule Personnalisé",
|
|
"section.presetVehicles": "Véhicules Prédéfinis",
|
|
"label.grossSalary": "Salaire Brut Mensuel",
|
|
"label.maritalStatus": "Statut Matrimonial",
|
|
"label.taxRate": "Taux d'Impôt sur le Revenu",
|
|
"label.currentAge": "Âge Actuel",
|
|
"label.retirementAge": "Âge de Retraite",
|
|
"label.yearsWork": "Années de Travail",
|
|
"label.leaseDuration": "Durée Voiture de Société",
|
|
"label.retirementYears": "Années de Retraite",
|
|
"label.lifeExpectancy": "Espérance de Vie",
|
|
"label.salaryGrowth": "Croissance Salariale Annuelle",
|
|
"label.inflation": "Inflation Annuelle",
|
|
"label.discountRate": "Taux d'Actualisation",
|
|
"label.employerPension": "Contribution Pension Employeur",
|
|
"label.mobilityBudget": "Considérer le Budget Mobilité",
|
|
"label.vehicleModel": "Modèle de Véhicule",
|
|
"label.listPrice": "Prix Catalogue",
|
|
"label.co2Emissions": "Émissions CO2",
|
|
"label.fuelType": "Type de Carburant",
|
|
"help.grossSalary": "Votre salaire brut mensuel actuel en EUR",
|
|
"help.maritalStatus": "Affecte le taux de calcul de la pension",
|
|
"help.taxRate": "Votre taux d'imposition marginal en pourcentage",
|
|
"help.currentAge": "Votre âge aujourd'hui",
|
|
"help.retirementAge": "Âge de retraite prévu",
|
|
"help.yearsWork": "Calculé automatiquement",
|
|
"help.leaseDuration": "Durée prévue de la voiture de société",
|
|
"help.retirementYears": "Années prévues de perception de pension",
|
|
"help.lifeExpectancy": "Met à jour automatiquement les années de retraite",
|
|
"help.salaryGrowth": "Pourcentage d'augmentation salariale annuelle prévue",
|
|
"help.inflation": "Pourcentage du taux d'inflation annuel prévu",
|
|
"help.discountRate": "Pour les calculs de valeur actuelle en pourcentage",
|
|
"help.employerPension": "Pourcentage de pension employeur supplémentaire",
|
|
"help.mobilityBudget": "38,07% de contribution pour les droits à la pension",
|
|
"option.single": "Célibataire",
|
|
"option.married": "Marié (conjoint sans revenu)",
|
|
"option.cohabiting": "Cohabitation Légale",
|
|
"option.divorced": "Divorcé(e)",
|
|
"option.marriedDual": "Marié (les deux travaillent)",
|
|
"option.no": "Non",
|
|
"option.yes": "Oui - Afficher la comparaison",
|
|
"option.untilRetirement": "Jusqu'à la Retraite",
|
|
"placeholder.maritalStatus": "Choisissez votre statut...",
|
|
"placeholder.leaseDuration": "Combien de temps l'aurez-vous?",
|
|
"option.includeInflation": "Ajuster pour l'inflation dans les calculs",
|
|
"option.includePresentValue": "Afficher la valeur actuelle des pertes",
|
|
"option.includeElectric": "Inclure la comparaison de véhicules électriques",
|
|
"option.showYearlyBreakdown": "Afficher la répartition année par année",
|
|
"fuel.electric": "Électrique",
|
|
"fuel.petrol": "Essence",
|
|
"fuel.diesel": "Diesel",
|
|
"fuel.hybrid": "Hybride",
|
|
"preset.economy": "Économique (€25,000 - Véhicules compacts)",
|
|
"preset.middle": "Gamme Moyenne (€45,000 - Véhicules de taille moyenne)",
|
|
"preset.premium": "Premium (€75,000 - Véhicules de direction)",
|
|
"preset.electric": "Électrique (€55,000 - Véhicules zéro émission)",
|
|
"button.addVehicle": "Ajouter Véhicule",
|
|
"button.calculate": "Calculer l'Impact sur la Pension",
|
|
"button.goBack": "← Retour à la Config",
|
|
"placeholder.vehicleModel": "ex: Tesla Model 3",
|
|
"placeholder.co2": "0 pour électrique",
|
|
"results.howItWorks": "Comment Fonctionne Ce Calcul",
|
|
"results.explanation": "Les véhicules de société en Belgique sont imposés comme \"Avantage en Nature\" (AEN). Bien que vous payiez l'impôt sur le revenu sur cet avantage, aucune cotisation de sécurité sociale (RSZ) n'est payée, ce qui signifie qu'elle ne compte pas pour votre calcul de pension.",
|
|
"results.result": "Résultat : Vous recevrez moins de pension mensuelle pendant la retraite. Voir ci-dessous l'impact exact par type de véhicule.",
|
|
"results.title": "Impact Mensuel sur la Pension par Type de Véhicule",
|
|
"chart.title": "Projection Année par Année",
|
|
"assumptions.title": "Hypothèses de Calcul",
|
|
"assumptions.details": "• Calcul de pension : 75% (marié avec conjoint à charge) ou 60% (tous autres statuts) du salaire moyen de carrière<br>• Cotisation RSZ employé : 13,07% (7,5% pour pension)<br>• Coefficients CO2 pour 2025 : Diesel 67g/km, Essence 82g/km<br>• AEN minimum : €1,650/an<br>• Véhicules électriques : coefficient 4% (minimum)<br>• Facteur contribution solidarité 2025 : 2,75x<br>• Calculs basés sur la réglementation actuelle",
|
|
"filter.year": "Année",
|
|
"filter.fuelType": "Type de Carburant",
|
|
"filter.priceRange": "Gamme de Prix",
|
|
"filter.allYears": "Toutes les Années",
|
|
"filter.allFuelTypes": "Tous les Carburants",
|
|
"filter.allPrices": "Tous les Prix",
|
|
"filter.electric": "⚡ Électrique",
|
|
"filter.hybrid": "🔋 Hybride",
|
|
"filter.petrol": "⛽ Essence",
|
|
"filter.diesel": "🛢️ Diesel",
|
|
"filter.under30k": "Moins de €30,000",
|
|
"filter.30k50k": "€30,000 - €50,000",
|
|
"filter.50k75k": "€50,000 - €75,000",
|
|
"filter.75k100k": "€75,000 - €100,000",
|
|
"filter.above100k": "Plus de €100,000",
|
|
"search.placeholder": "Tapez pour rechercher... (ex: BMW X1, Mercedes C200, Audi Q5)",
|
|
"search.label": "Rechercher Véhicule",
|
|
"manual.override": "Saisir les détails du véhicule manuellement",
|
|
"manual.vehicleName": "Nom du Véhicule",
|
|
"manual.listPrice": "Prix Catalogue (€)",
|
|
"manual.co2Emissions": "Émissions CO2 (g/km)",
|
|
"manual.fuelType": "Type de Carburant",
|
|
"units.perMonth": "/mois",
|
|
"units.perMo": "/mois"
|
|
},
|
|
nl: {
|
|
title: "Bedrijfswagen Belasting Calculator",
|
|
subtitle: "Bereken pensioenimpact voor bedrijfswagens in België",
|
|
"disclaimer.title": "Belangrijke Kennisgeving",
|
|
"disclaimer.text": "Deze calculator geeft schattingen op basis van huidige regelgeving en marktgegevens. Voertuigprijzen en specificaties kunnen variëren. Raadpleeg altijd een belastingprofessional of uw HR-afdeling voor officiële berekeningen. Laatst bijgewerkt: Augustus 2025.",
|
|
"tab.basic": "Basis",
|
|
"tab.advanced": "Opties",
|
|
"tab.custom": "Auto's",
|
|
"section.essential": "🎯 Essentiële Informatie - Vul Deze Eerst In",
|
|
"section.vehicles": "🚗 Selecteer uw Bedrijfswagen",
|
|
"section.additional": "📊 Aanvullende Informatie",
|
|
"section.calculated": "Berekende Parameters (Aanpasbaar)",
|
|
"section.advancedOptions": "Geavanceerde Opties",
|
|
"section.options": "Weergaveopties",
|
|
"section.personal": "Persoonlijke Informatie",
|
|
"section.time": "Tijd Parameters",
|
|
"section.growth": "Groei & Inflatie Parameters",
|
|
"section.company": "Bedrijfsbijdragen",
|
|
"section.customVehicle": "Aangepast Voertuig Toevoegen",
|
|
"section.presetVehicles": "Vooraf Ingestelde Voertuigen",
|
|
"label.grossSalary": "Bruto Maandsalaris",
|
|
"label.maritalStatus": "Burgerlijke Staat",
|
|
"label.taxRate": "Inkomstenbelastingtarief",
|
|
"label.currentAge": "Huidige Leeftijd",
|
|
"label.retirementAge": "Pensioenleeftijd",
|
|
"label.yearsWork": "Jaren Werken",
|
|
"label.leaseDuration": "Bedrijfswagen Duur",
|
|
"label.retirementYears": "Jaren Pensioen",
|
|
"label.lifeExpectancy": "Levensverwachting",
|
|
"label.salaryGrowth": "Jaarlijkse Salarisgroei",
|
|
"label.inflation": "Jaarlijkse Inflatie",
|
|
"label.discountRate": "Discontovoet",
|
|
"label.employerPension": "Werkgever Pensioenbijdrage",
|
|
"label.mobilityBudget": "Mobiliteitsbudget Overwegen",
|
|
"label.vehicleModel": "Voertuigmodel",
|
|
"label.listPrice": "Catalogusprijs",
|
|
"label.co2Emissions": "CO2 Uitstoot",
|
|
"label.fuelType": "Brandstoftype",
|
|
"help.grossSalary": "Uw huidige bruto maandsalaris in EUR",
|
|
"help.maritalStatus": "Beïnvloedt pensioenberekening",
|
|
"help.taxRate": "Uw marginale belastingtarief percentage",
|
|
"help.currentAge": "Uw leeftijd vandaag",
|
|
"help.retirementAge": "Verwachte pensioenleeftijd",
|
|
"help.yearsWork": "Automatisch berekend",
|
|
"help.leaseDuration": "Hoe lang u de bedrijfswagen zult hebben",
|
|
"help.retirementYears": "Verwachte jaren pensioenuitkering",
|
|
"help.lifeExpectancy": "Werkt pensioenjaren automatisch bij",
|
|
"help.salaryGrowth": "Verwacht jaarlijks salarissverhoging percentage",
|
|
"help.inflation": "Verwacht jaarlijks inflatiepercentage",
|
|
"help.discountRate": "Voor huidige waarde berekeningen percentage",
|
|
"help.employerPension": "Extra werkgever pensioenpercentage",
|
|
"help.mobilityBudget": "38,07% bijdrage voor pensioenrechten",
|
|
"option.single": "Alleenstaand",
|
|
"option.married": "Getrouwd (partner geen inkomen)",
|
|
"option.cohabiting": "Wettelijk Samenwonend",
|
|
"option.divorced": "Gescheiden",
|
|
"option.marriedDual": "Getrouwd (beiden werkend)",
|
|
"option.no": "Nee",
|
|
"option.yes": "Ja - Toon vergelijking",
|
|
"option.untilRetirement": "Tot Pensioen",
|
|
"placeholder.maritalStatus": "Kies uw status...",
|
|
"placeholder.leaseDuration": "Hoe lang zult u het hebben?",
|
|
"option.includeInflation": "Aanpassen voor inflatie in berekeningen",
|
|
"option.includePresentValue": "Toon huidige waarde van verliezen",
|
|
"option.includeElectric": "Elektrische voertuig vergelijking opnemen",
|
|
"option.showYearlyBreakdown": "Toon jaar-op-jaar uitsplitsing",
|
|
"fuel.electric": "Elektrisch",
|
|
"fuel.petrol": "Benzine",
|
|
"fuel.diesel": "Diesel",
|
|
"fuel.hybrid": "Hybride",
|
|
"preset.economy": "Economisch (€25,000 - Compacte voertuigen)",
|
|
"preset.middle": "Middensegment (€45,000 - Middelgrote voertuigen)",
|
|
"preset.premium": "Premium (€75,000 - Directievoertuigen)",
|
|
"preset.electric": "Elektrisch (€55,000 - Nulemissie voertuigen)",
|
|
"button.addVehicle": "Voertuig Toevoegen",
|
|
"button.calculate": "Bereken Pensioenimpact",
|
|
"button.goBack": "← Terug naar Basis",
|
|
"placeholder.vehicleModel": "bijv. Tesla Model 3",
|
|
"placeholder.co2": "0 voor elektrisch",
|
|
"results.howItWorks": "Hoe Deze Berekening Werkt",
|
|
"results.explanation": "Bedrijfswagens in België worden belast als \"Voordeel Alle Aard\" (VAA). Hoewel u inkomstenbelasting betaalt op dit voordeel, worden er geen sociale zekerheidsbijdragen (RSZ) betaald, wat betekent dat het niet meetelt voor uw pensioenberekening.",
|
|
"results.result": "Resultaat: U ontvangt minder maandelijks pensioen tijdens de pensionering. Zie hieronder voor de exacte impact per voertuigtype.",
|
|
"results.title": "Maandelijkse Pensioenimpact per Voertuigtype",
|
|
"chart.title": "Jaar-op-Jaar Projectie",
|
|
"assumptions.title": "Berekeningsveronderstellingen",
|
|
"assumptions.details": "• Pensioenberekening: 75% (getrouwd met afhankelijke partner) of 60% (alle andere statussen) van gemiddeld loopbaansalaris<br>• Werknemer RSZ bijdrage: 13,07% (7,5% voor pensioen)<br>• CO2 coëfficiënten voor 2025: Diesel 67g/km, Benzine 82g/km<br>• Minimum VAA: €1,650/jaar<br>• Elektrische voertuigen: 4% coëfficiënt (minimum)<br>• Solidariteitsbijdrage factor 2025: 2,75x<br>• Berekeningen gebaseerd op huidige regelgeving",
|
|
"filter.year": "Jaar",
|
|
"filter.fuelType": "Brandstoftype",
|
|
"filter.priceRange": "Prijsklasse",
|
|
"filter.allYears": "Alle Jaren",
|
|
"filter.allFuelTypes": "Alle Brandstoffen",
|
|
"filter.allPrices": "Alle Prijzen",
|
|
"filter.electric": "⚡ Elektrisch",
|
|
"filter.hybrid": "🔋 Hybride",
|
|
"filter.petrol": "⛽ Benzine",
|
|
"filter.diesel": "🛢️ Diesel",
|
|
"filter.under30k": "Onder €30,000",
|
|
"filter.30k50k": "€30,000 - €50,000",
|
|
"filter.50k75k": "€50,000 - €75,000",
|
|
"filter.75k100k": "€75,000 - €100,000",
|
|
"filter.above100k": "Boven €100,000",
|
|
"search.placeholder": "Type om te zoeken... (bijv. BMW X1, Mercedes C200, Audi Q5)",
|
|
"search.label": "Zoek Voertuig",
|
|
"manual.override": "Voertuigdetails handmatig invoeren",
|
|
"manual.vehicleName": "Voertuignaam",
|
|
"manual.listPrice": "Catalogusprijs (€)",
|
|
"manual.co2Emissions": "CO2 Uitstoot (g/km)",
|
|
"manual.fuelType": "Brandstoftype",
|
|
"units.perMonth": "/maand",
|
|
"units.perMo": "/md"
|
|
}
|
|
};
|
|
|
|
const presetCars = {
|
|
cheap: {
|
|
name: {
|
|
en: "Economy Vehicle",
|
|
fr: "Véhicule Économique",
|
|
nl: "Economisch Voertuig"
|
|
},
|
|
price: 25000,
|
|
co2: 110,
|
|
fuel: "petrol",
|
|
examples: {
|
|
en: "Compact segment",
|
|
fr: "Segment compact",
|
|
nl: "Compact segment"
|
|
}
|
|
},
|
|
middle: {
|
|
name: {
|
|
en: "Middle Range",
|
|
fr: "Gamme Moyenne",
|
|
nl: "Middensegment"
|
|
},
|
|
price: 45000,
|
|
co2: 130,
|
|
fuel: "diesel",
|
|
examples: {
|
|
en: "Mid-size segment",
|
|
fr: "Segment de taille moyenne",
|
|
nl: "Middelgroot segment"
|
|
}
|
|
},
|
|
expensive: {
|
|
name: {
|
|
en: "Premium Vehicle",
|
|
fr: "Véhicule Premium",
|
|
nl: "Premium Voertuig"
|
|
},
|
|
price: 75000,
|
|
co2: 160,
|
|
fuel: "petrol",
|
|
examples: {
|
|
en: "Executive segment",
|
|
fr: "Segment de direction",
|
|
nl: "Directie segment"
|
|
}
|
|
},
|
|
electric: {
|
|
name: {
|
|
en: "Electric Vehicle",
|
|
fr: "Véhicule Électrique",
|
|
nl: "Elektrisch Voertuig"
|
|
},
|
|
price: 55000,
|
|
co2: 0,
|
|
fuel: "electric",
|
|
examples: {
|
|
en: "Zero emission",
|
|
fr: "Zéro émission",
|
|
nl: "Nul uitstoot"
|
|
}
|
|
}
|
|
};
|
|
|
|
function switchLanguage(lang) {
|
|
currentLanguage = lang;
|
|
document.documentElement.lang = lang;
|
|
|
|
// Update language buttons
|
|
document.querySelectorAll('.language-btn').forEach(btn => {
|
|
btn.classList.remove('active');
|
|
if (btn.textContent.toLowerCase() === lang) {
|
|
btn.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Update all translatable elements
|
|
document.querySelectorAll('[data-i18n]').forEach(element => {
|
|
const key = element.getAttribute('data-i18n');
|
|
if (translations[lang] && translations[lang][key]) {
|
|
element.innerHTML = translations[lang][key];
|
|
}
|
|
});
|
|
|
|
// Update placeholders
|
|
document.querySelectorAll('[data-i18n-placeholder]').forEach(element => {
|
|
const key = element.getAttribute('data-i18n-placeholder');
|
|
if (translations[lang] && translations[lang][key]) {
|
|
element.placeholder = translations[lang][key];
|
|
}
|
|
});
|
|
|
|
// Update select options
|
|
updateSelectOptions();
|
|
|
|
// Clear results if shown to force recalculation with new language
|
|
if (document.getElementById('results').style.display !== 'none') {
|
|
document.getElementById('results').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function updateSelectOptions() {
|
|
// Update marital status options - skip placeholder and map correctly
|
|
const maritalSelect = document.getElementById('marital-status');
|
|
if (maritalSelect) {
|
|
const maritalOptions = maritalSelect.querySelectorAll('option');
|
|
// Skip the placeholder option [0] and update the actual options
|
|
if (maritalOptions.length >= 6) {
|
|
maritalOptions[0].textContent = translations[currentLanguage]['placeholder.maritalStatus']; // placeholder
|
|
maritalOptions[1].textContent = translations[currentLanguage]['option.single']; // single
|
|
maritalOptions[2].textContent = translations[currentLanguage]['option.married']; // married
|
|
maritalOptions[3].textContent = translations[currentLanguage]['option.cohabiting']; // cohabiting
|
|
maritalOptions[4].textContent = translations[currentLanguage]['option.divorced']; // divorced
|
|
maritalOptions[5].textContent = translations[currentLanguage]['option.marriedDual']; // married-dual
|
|
}
|
|
}
|
|
|
|
// Mobility budget is now a checkbox, no options to update
|
|
|
|
// Update fuel type options for manual mode
|
|
const fuelSelect = document.getElementById('manual-fuel');
|
|
if (fuelSelect) {
|
|
const fuelOptions = fuelSelect.querySelectorAll('option');
|
|
if (fuelOptions.length >= 4) {
|
|
fuelOptions[0].textContent = translations[currentLanguage]['fuel.electric'];
|
|
fuelOptions[1].textContent = translations[currentLanguage]['fuel.petrol'];
|
|
fuelOptions[2].textContent = translations[currentLanguage]['fuel.diesel'];
|
|
fuelOptions[3].textContent = translations[currentLanguage]['fuel.hybrid'];
|
|
}
|
|
}
|
|
|
|
// Update vehicle search component if available
|
|
if (typeof vehicleAutocomplete !== 'undefined' && vehicleAutocomplete && vehicleAutocomplete.updateTranslations) {
|
|
vehicleAutocomplete.updateTranslations();
|
|
}
|
|
}
|
|
|
|
// Auto-calculate years to work - will be set up in DOMContentLoaded
|
|
function setupEventListeners() {
|
|
document.getElementById('current-age').addEventListener('input', updateYearsToWork);
|
|
document.getElementById('retirement-age').addEventListener('input', updateYearsToWork);
|
|
document.getElementById('life-expectancy').addEventListener('input', updateRetirementYears);
|
|
}
|
|
|
|
function updateYearsToWork() {
|
|
const currentAge = parseInt(document.getElementById('current-age').value);
|
|
const retirementAge = parseInt(document.getElementById('retirement-age').value);
|
|
const yearsToWork = Math.max(0, retirementAge - currentAge);
|
|
document.getElementById('years-work').value = yearsToWork;
|
|
}
|
|
|
|
function updateRetirementYears() {
|
|
const retirementAge = parseInt(document.getElementById('retirement-age').value);
|
|
const lifeExpectancy = parseInt(document.getElementById('life-expectancy').value);
|
|
const retirementYears = Math.max(0, lifeExpectancy - retirementAge);
|
|
document.getElementById('retirement-years').value = retirementYears;
|
|
}
|
|
|
|
function translateFuelType(fuelType) {
|
|
const fuelTranslations = {
|
|
'electric': translations[currentLanguage]['fuel.electric'] || 'Electric',
|
|
'petrol': translations[currentLanguage]['fuel.petrol'] || 'Petrol',
|
|
'diesel': translations[currentLanguage]['fuel.diesel'] || 'Diesel',
|
|
'hybrid': translations[currentLanguage]['fuel.hybrid'] || 'Hybrid'
|
|
};
|
|
return fuelTranslations[fuelType] || fuelType;
|
|
}
|
|
|
|
// Progress monitoring functions
|
|
function checkEssentialFields() {
|
|
const requiredFields = ['gross-salary', 'current-age', 'tax-rate', 'marital-status', 'lease-duration'];
|
|
let allFilled = true;
|
|
|
|
for (const fieldId of requiredFields) {
|
|
const element = document.getElementById(fieldId);
|
|
if (!element.value || element.value.trim() === '') {
|
|
allFilled = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (allFilled) {
|
|
enableVehicleSelection();
|
|
} else {
|
|
disableVehicleSelection();
|
|
disableCalculateButton();
|
|
hideCalculatedSection(); // Hide calculated parameters when Step 1 incomplete
|
|
}
|
|
|
|
return allFilled;
|
|
}
|
|
|
|
function enableVehicleSelection() {
|
|
const vehicleSection = document.getElementById('vehicle-section');
|
|
if (vehicleSection) {
|
|
// Show the Step 2 section
|
|
vehicleSection.style.display = 'block';
|
|
vehicleSection.style.opacity = '1';
|
|
vehicleSection.style.border = '1px solid #d97706';
|
|
vehicleSection.style.background = 'linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%)';
|
|
|
|
// Style the section title
|
|
const sectionTitle = vehicleSection.querySelector('.section-title');
|
|
if (sectionTitle) {
|
|
sectionTitle.style.color = '#d97706';
|
|
}
|
|
|
|
// Enable the vehicle search system
|
|
if (vehicleAutocomplete && typeof vehicleAutocomplete.enable === 'function') {
|
|
try {
|
|
vehicleAutocomplete.enable();
|
|
} catch (error) {
|
|
console.error('Error enabling vehicle search:', error);
|
|
}
|
|
} else {
|
|
console.warn('vehicleAutocomplete not available for enabling');
|
|
}
|
|
}
|
|
}
|
|
|
|
function disableVehicleSelection() {
|
|
const vehicleSection = document.getElementById('vehicle-section');
|
|
if (vehicleSection) {
|
|
// Completely hide Step 2 section instead of just disabling
|
|
vehicleSection.style.display = 'none';
|
|
|
|
// Reset the styling when hiding
|
|
vehicleSection.style.opacity = '0.6';
|
|
vehicleSection.style.border = '1px solid #e5e7eb';
|
|
vehicleSection.style.background = '#f9fafb';
|
|
|
|
// Reset section title styling
|
|
const sectionTitle = vehicleSection.querySelector('.section-title');
|
|
if (sectionTitle) {
|
|
sectionTitle.style.color = '#6b7280';
|
|
}
|
|
|
|
// Disable the vehicle search system
|
|
if (vehicleAutocomplete && typeof vehicleAutocomplete.disable === 'function') {
|
|
try {
|
|
vehicleAutocomplete.disable();
|
|
} catch (error) {
|
|
console.error('Error disabling vehicle search:', error);
|
|
}
|
|
} else {
|
|
console.warn('vehicleAutocomplete not available for disabling');
|
|
}
|
|
}
|
|
}
|
|
|
|
function checkVehicleSelected() {
|
|
const customCarsList = document.getElementById('custom-cars-list');
|
|
const hasVehicle = customCarsList && customCarsList.children.length > 0;
|
|
|
|
// Check vehicle status without updating step indicators
|
|
if (hasVehicle) {
|
|
enableCalculateButton();
|
|
showCalculatedSection(); // Show calculated parameters when vehicle is selected
|
|
} else {
|
|
disableCalculateButton();
|
|
hideCalculatedSection(); // Hide calculated parameters when no vehicle
|
|
}
|
|
|
|
return hasVehicle;
|
|
}
|
|
|
|
function enableCalculateButton() {
|
|
const calculateSection = document.getElementById('calculate-section');
|
|
const calculateBtn = document.getElementById('calculate-btn');
|
|
|
|
if (calculateSection && calculateBtn) {
|
|
calculateSection.style.opacity = '1';
|
|
calculateBtn.disabled = false;
|
|
calculateBtn.style.background = '#059669';
|
|
calculateBtn.style.color = 'white';
|
|
calculateBtn.style.cursor = 'pointer';
|
|
calculateBtn.onmouseover = function() {
|
|
this.style.background = '#047857';
|
|
this.style.transform = 'translateY(-2px)';
|
|
};
|
|
calculateBtn.onmouseout = function() {
|
|
this.style.background = '#059669';
|
|
this.style.transform = 'translateY(0)';
|
|
};
|
|
|
|
// Button is now enabled and styled
|
|
}
|
|
}
|
|
|
|
function disableCalculateButton() {
|
|
const calculateSection = document.getElementById('calculate-section');
|
|
const calculateBtn = document.getElementById('calculate-btn');
|
|
|
|
if (calculateSection && calculateBtn) {
|
|
calculateSection.style.opacity = '0.3';
|
|
calculateBtn.disabled = true;
|
|
calculateBtn.style.background = '#d1d5db';
|
|
calculateBtn.style.color = '#9ca3af';
|
|
calculateBtn.style.cursor = 'not-allowed';
|
|
calculateBtn.onmouseover = null;
|
|
calculateBtn.onmouseout = null;
|
|
}
|
|
}
|
|
|
|
function toggleCalculatedParams() {
|
|
const content = document.getElementById('calculated-content');
|
|
const toggle = document.getElementById('calculated-toggle');
|
|
|
|
if (content.style.display === 'none') {
|
|
content.style.display = 'block';
|
|
toggle.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
content.style.display = 'none';
|
|
toggle.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
function toggleAdvancedOptions() {
|
|
const content = document.getElementById('advanced-content');
|
|
const toggle = document.getElementById('advanced-toggle');
|
|
|
|
if (content.style.display === 'none') {
|
|
content.style.display = 'block';
|
|
toggle.style.transform = 'rotate(180deg)';
|
|
} else {
|
|
content.style.display = 'none';
|
|
toggle.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
function showCalculatedSection() {
|
|
const advancedCalculatedContainer = document.getElementById('advanced-calculated-container');
|
|
if (advancedCalculatedContainer) {
|
|
advancedCalculatedContainer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function hideCalculatedSection() {
|
|
const advancedCalculatedContainer = document.getElementById('advanced-calculated-container');
|
|
if (advancedCalculatedContainer) {
|
|
advancedCalculatedContainer.style.display = 'none';
|
|
// Also close both sections if they were open
|
|
const calculatedContent = document.getElementById('calculated-content');
|
|
const calculatedToggle = document.getElementById('calculated-toggle');
|
|
const advancedContent = document.getElementById('advanced-content');
|
|
const advancedToggle = document.getElementById('advanced-toggle');
|
|
|
|
if (calculatedContent) calculatedContent.style.display = 'none';
|
|
if (calculatedToggle) calculatedToggle.style.transform = 'rotate(0deg)';
|
|
if (advancedContent) advancedContent.style.display = 'none';
|
|
if (advancedToggle) advancedToggle.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
function validateRequiredFields() {
|
|
const requiredFields = [
|
|
{id: 'gross-salary', name: 'Gross Monthly Salary'},
|
|
{id: 'current-age', name: 'Current Age'},
|
|
{id: 'tax-rate', name: 'Income Tax Rate'},
|
|
{id: 'marital-status', name: 'Marital Status'},
|
|
{id: 'lease-duration', name: 'Company Car Duration'}
|
|
];
|
|
|
|
const emptyFields = [];
|
|
|
|
for (const field of requiredFields) {
|
|
const element = document.getElementById(field.id);
|
|
const value = element.value.toString().trim();
|
|
|
|
if (!value || value === '') {
|
|
emptyFields.push(field.name);
|
|
}
|
|
}
|
|
|
|
if (emptyFields.length > 0) {
|
|
alert('Please fill in all required fields:\n• ' + emptyFields.join('\n• '));
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function addSelectedVehicle() {
|
|
// Validate required fields first
|
|
if (!validateRequiredFields()) {
|
|
return;
|
|
}
|
|
|
|
if (!vehicleAutocomplete) {
|
|
alert('Vehicle system is still loading. Please try again in a moment.');
|
|
return;
|
|
}
|
|
|
|
const vehicleData = vehicleAutocomplete.getSelectedVehicleData();
|
|
const validation = VehicleAutocompleteUtils.validateVehicleData(vehicleData);
|
|
|
|
if (!validation.valid) {
|
|
const messages = {
|
|
en: validation.message,
|
|
fr: validation.message,
|
|
nl: validation.message
|
|
};
|
|
alert(messages[currentLanguage]);
|
|
return;
|
|
}
|
|
|
|
const customCar = VehicleAutocompleteUtils.convertToCustomCar(vehicleData);
|
|
customCars.push(customCar);
|
|
updateCustomCarsList();
|
|
checkVehicleSelected(); // Check if vehicle is selected for progress
|
|
|
|
// Reset the autocomplete form
|
|
vehicleAutocomplete.reset();
|
|
}
|
|
|
|
function addCustomCar() {
|
|
// Legacy function - redirects to new system
|
|
addSelectedVehicle();
|
|
}
|
|
|
|
function updateCustomCarsList() {
|
|
const listDiv = document.getElementById('custom-cars-list');
|
|
if (customCars.length === 0) {
|
|
listDiv.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const addedVehiclesText = {
|
|
en: 'Added Vehicles:',
|
|
fr: 'Véhicules Ajoutés:',
|
|
nl: 'Toegevoegde Voertuigen:'
|
|
};
|
|
|
|
const removeText = {
|
|
en: 'Remove',
|
|
fr: 'Supprimer',
|
|
nl: 'Verwijderen'
|
|
};
|
|
|
|
let html = '<h4 style="margin-bottom: 12px; font-size: 0.95rem; font-weight: 500;">' + addedVehiclesText[currentLanguage] + '</h4>';
|
|
customCars.forEach((car, index) => {
|
|
html += '<div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: white; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 8px;">';
|
|
html += '<span style="font-size: 0.9rem;">' + car.name + ' - €' + car.price.toLocaleString() + ' - ' + car.co2 + 'g CO₂</span>';
|
|
html += '<button onclick="removeCustomCar(' + index + ')" style="background: white; color: #dc3545; border: 1px solid #dc3545; padding: 4px 12px; border-radius: 3px; cursor: pointer; font-size: 0.85rem;">' + removeText[currentLanguage] + '</button>';
|
|
html += '</div>';
|
|
});
|
|
listDiv.innerHTML = html;
|
|
}
|
|
|
|
function removeCustomCar(index) {
|
|
customCars.splice(index, 1);
|
|
updateCustomCarsList();
|
|
checkVehicleSelected(); // Check if vehicle is still selected for progress
|
|
}
|
|
|
|
function calculateBIK(carPrice, co2, fuel) {
|
|
let coefficient;
|
|
const minCoefficient = 0.04;
|
|
const maxCoefficient = 0.18;
|
|
|
|
if (co2 === 0 || fuel === "electric") {
|
|
coefficient = minCoefficient;
|
|
} else if (fuel === "diesel") {
|
|
coefficient = (5.5 + 0.1 * (co2 - 67)) / 100;
|
|
} else {
|
|
coefficient = (5.5 + 0.1 * (co2 - 82)) / 100;
|
|
}
|
|
|
|
coefficient = Math.max(minCoefficient, Math.min(maxCoefficient, coefficient));
|
|
|
|
const bik = carPrice * coefficient * 6/7;
|
|
return Math.max(bik, 1650);
|
|
}
|
|
|
|
function calculatePresentValue(futureValue, years, discountRate) {
|
|
return futureValue / Math.pow(1 + discountRate, years);
|
|
}
|
|
|
|
function calculatePensionLoss() {
|
|
// Validate required fields first
|
|
if (!validateRequiredFields()) {
|
|
return;
|
|
}
|
|
|
|
// Check if at least one vehicle is selected or added
|
|
if (customCars.length === 0) {
|
|
alert('Please add at least one company car to analyze.');
|
|
return;
|
|
}
|
|
|
|
// Get all input values
|
|
const grossSalary = parseFloat(document.getElementById('gross-salary').value);
|
|
const maritalStatus = document.getElementById('marital-status').value;
|
|
const yearsWork = parseInt(document.getElementById('years-work').value);
|
|
const retirementYears = parseInt(document.getElementById('retirement-years').value);
|
|
const taxRate = parseFloat(document.getElementById('tax-rate').value) / 100;
|
|
const salaryGrowth = parseFloat(document.getElementById('salary-growth').value) / 100;
|
|
const inflation = parseFloat(document.getElementById('inflation').value) / 100;
|
|
const discountRate = parseFloat(document.getElementById('discount-rate').value) / 100;
|
|
const currentAge = parseInt(document.getElementById('current-age').value);
|
|
const leaseDuration = parseInt(document.getElementById('lease-duration').value);
|
|
const yearsWithCar = leaseDuration === 0 ? yearsWork : Math.min(leaseDuration, yearsWork);
|
|
|
|
// Get options
|
|
const includeInflation = document.getElementById('include-inflation').checked;
|
|
const includePresentValue = document.getElementById('include-present-value').checked;
|
|
const includeElectric = document.getElementById('include-electric').checked;
|
|
const showYearlyBreakdown = document.getElementById('show-yearly-breakdown').checked;
|
|
const mobilityBudget = document.getElementById('mobility-budget').checked;
|
|
|
|
const annualSalary = grossSalary * 12;
|
|
|
|
// Belgian pension calculation rates based on marital status
|
|
let pensionMultiplier;
|
|
switch(maritalStatus) {
|
|
case "married":
|
|
pensionMultiplier = 0.75; // 75% for married with non-working spouse
|
|
break;
|
|
case "married-dual":
|
|
pensionMultiplier = 0.60; // 60% for married with both working
|
|
break;
|
|
case "cohabiting":
|
|
pensionMultiplier = 0.60; // 60% for legal cohabitation
|
|
break;
|
|
case "divorced":
|
|
pensionMultiplier = 0.60; // 60% for divorced individuals
|
|
break;
|
|
case "single":
|
|
default:
|
|
pensionMultiplier = 0.60; // 60% for single individuals
|
|
break;
|
|
}
|
|
|
|
// Build cars array from selected vehicles only
|
|
let carsToAnalyze = [];
|
|
|
|
// Add all selected custom cars
|
|
customCars.forEach(car => {
|
|
carsToAnalyze.push({...car, type: 'custom'});
|
|
});
|
|
|
|
if (carsToAnalyze.length === 0) {
|
|
const messages = {
|
|
en: 'Please select at least one vehicle to analyze',
|
|
fr: 'Veuillez sélectionner au moins un véhicule à analyser',
|
|
nl: 'Selecteer ten minste één voertuig om te analyseren'
|
|
};
|
|
alert(messages[currentLanguage]);
|
|
return;
|
|
}
|
|
|
|
let carComparisonHTML = '';
|
|
let maxLoss = 0;
|
|
let minLoss = Infinity;
|
|
let minMonthlyLoss = Infinity;
|
|
let maxMonthlyLoss = 0;
|
|
let yearlyData = [];
|
|
|
|
const labels = {
|
|
en: {
|
|
listPrice: "List Price",
|
|
co2Fuel: "CO₂ / Fuel",
|
|
annualBik: "Annual BIK",
|
|
monthlyTax: "Monthly Tax",
|
|
rszLostMonth: "RSZ Lost/Month",
|
|
co2TaxYear: "CO₂ Tax/Year",
|
|
monthlyPensionLoss: "Monthly Pension Loss",
|
|
duringRetirement: "During retirement",
|
|
everyMonthFor: "Every month for",
|
|
years: "years",
|
|
totalLifetimeLoss: "Total Lifetime Loss",
|
|
presentValue: "Present Value",
|
|
electric: "Electric",
|
|
custom: "Custom"
|
|
},
|
|
fr: {
|
|
listPrice: "Prix Catalogue",
|
|
co2Fuel: "CO₂ / Carburant",
|
|
annualBik: "AEN Annuel",
|
|
monthlyTax: "Taxe Mensuelle",
|
|
rszLostMonth: "RSZ Perdu/Mois",
|
|
co2TaxYear: "Taxe CO₂/An",
|
|
monthlyPensionLoss: "Perte Pension Mensuelle",
|
|
duringRetirement: "Pendant la retraite",
|
|
everyMonthFor: "Chaque mois pendant",
|
|
years: "ans",
|
|
totalLifetimeLoss: "Perte Totale à Vie",
|
|
presentValue: "Valeur Actuelle",
|
|
electric: "Électrique",
|
|
custom: "Personnalisé"
|
|
},
|
|
nl: {
|
|
listPrice: "Catalogusprijs",
|
|
co2Fuel: "CO₂ / Brandstof",
|
|
annualBik: "Jaarlijkse VAA",
|
|
monthlyTax: "Maandelijkse Belasting",
|
|
rszLostMonth: "RSZ Verlies/Maand",
|
|
co2TaxYear: "CO₂ Belasting/Jaar",
|
|
monthlyPensionLoss: "Maandelijks Pensioenverlies",
|
|
duringRetirement: "Tijdens pensioen",
|
|
everyMonthFor: "Elke maand gedurende",
|
|
years: "jaar",
|
|
totalLifetimeLoss: "Totaal Levenslang Verlies",
|
|
presentValue: "Huidige Waarde",
|
|
electric: "Elektrisch",
|
|
custom: "Aangepast"
|
|
}
|
|
};
|
|
|
|
carsToAnalyze.forEach(car => {
|
|
// Calculate BIK
|
|
const annualBIK = calculateBIK(car.price, car.co2, car.fuel);
|
|
const monthlyBIK = annualBIK / 12;
|
|
|
|
// Net cost to employee (after tax)
|
|
const netMonthlyCost = monthlyBIK * taxRate;
|
|
const netAnnualCost = netMonthlyCost * 12;
|
|
|
|
// Equivalent gross salary calculation
|
|
const equivalentGrossSalary = netMonthlyCost / (1 - taxRate - 0.1307);
|
|
|
|
// RSZ that would be paid on equivalent salary
|
|
const monthlyRSZLost = equivalentGrossSalary * 0.1307;
|
|
const annualRSZLost = monthlyRSZLost * 12;
|
|
|
|
// Calculate average salary over career with growth
|
|
let totalCareerSalary = 0;
|
|
for (let year = 0; year < yearsWork; year++) {
|
|
totalCareerSalary += equivalentGrossSalary * 12 * Math.pow(1 + salaryGrowth, year);
|
|
}
|
|
const averageCareerSalary = totalCareerSalary / yearsWork;
|
|
|
|
// Dual calculation: lease period and lifetime impact
|
|
// Lease period impact (only the years with the car)
|
|
const annualPensionLossLease = (averageCareerSalary * pensionMultiplier * yearsWithCar) / 45;
|
|
const monthlyPensionLossLease = annualPensionLossLease / 12;
|
|
|
|
// Full career impact (if continued until retirement)
|
|
const annualPensionLossFull = (averageCareerSalary * pensionMultiplier * yearsWork) / 45;
|
|
const monthlyPensionLossFull = annualPensionLossFull / 12;
|
|
|
|
// Use lease period for main calculations if specified
|
|
const annualPensionLoss = leaseDuration === 0 ? annualPensionLossFull : annualPensionLossLease;
|
|
const monthlyPensionLoss = leaseDuration === 0 ? monthlyPensionLossFull : monthlyPensionLossLease;
|
|
|
|
// Track min/max monthly losses
|
|
minMonthlyLoss = Math.min(minMonthlyLoss, monthlyPensionLoss);
|
|
maxMonthlyLoss = Math.max(maxMonthlyLoss, monthlyPensionLoss);
|
|
|
|
// Total loss calculation (for display period)
|
|
let totalPensionLoss = 0;
|
|
for (let year = 0; year < retirementYears; year++) {
|
|
const yearlyLoss = annualPensionLoss * (includeInflation ? Math.pow(1 + inflation, year) : 1);
|
|
totalPensionLoss += yearlyLoss;
|
|
}
|
|
|
|
// Calculate full lifetime impact for comparison
|
|
let totalPensionLossFull = 0;
|
|
if (leaseDuration > 0) {
|
|
for (let year = 0; year < retirementYears; year++) {
|
|
const yearlyLoss = annualPensionLossFull * (includeInflation ? Math.pow(1 + inflation, year) : 1);
|
|
totalPensionLossFull += yearlyLoss;
|
|
}
|
|
}
|
|
|
|
// Store both values for display
|
|
car.monthlyLossLease = monthlyPensionLossLease;
|
|
car.monthlyLossFull = monthlyPensionLossFull;
|
|
car.totalLossLease = totalPensionLoss;
|
|
car.totalLossFull = leaseDuration > 0 ? totalPensionLossFull : totalPensionLoss;
|
|
|
|
// Present value calculation
|
|
let presentValueLoss = totalPensionLoss;
|
|
if (includePresentValue) {
|
|
presentValueLoss = calculatePresentValue(totalPensionLoss, yearsWork, discountRate);
|
|
}
|
|
|
|
maxLoss = Math.max(maxLoss, totalPensionLoss);
|
|
minLoss = Math.min(minLoss, totalPensionLoss);
|
|
|
|
// Solidarity contribution (CO2 tax) for employer
|
|
let solidarityContribution = 447.96;
|
|
if (car.co2 > 0) {
|
|
const baseFactor = car.fuel === "diesel" ? 600 : 768;
|
|
solidarityContribution = ((car.co2 * 9) - baseFactor) * 1.4455 * 2.75;
|
|
solidarityContribution = Math.max(solidarityContribution, 447.96);
|
|
}
|
|
|
|
let badgeHtml = '';
|
|
if (car.type === 'electric') badgeHtml = '<span class="badge badge-electric">' + labels[currentLanguage].electric + '</span>';
|
|
if (car.type === 'custom') badgeHtml = '<span class="badge badge-new">' + labels[currentLanguage].custom + '</span>';
|
|
|
|
let presentValueRow = '';
|
|
if (includePresentValue) {
|
|
presentValueRow = '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].presentValue + '</span><span class="detail-value">€' + Math.round(presentValueLoss).toLocaleString() + '</span></div>';
|
|
}
|
|
|
|
carComparisonHTML += '<div class="car-card ' + car.type + '">';
|
|
carComparisonHTML += '<div class="car-title">' + car.name + ' ' + badgeHtml + '</div>';
|
|
carComparisonHTML += '<div class="car-subtitle">' + car.examples + '</div>';
|
|
carComparisonHTML += '<div class="car-details">';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].listPrice + '</span><span class="detail-value">€' + car.price.toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2Fuel + '</span><span class="detail-value">' + car.co2 + 'g / ' + translateFuelType(car.fuel) + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].annualBik + '</span><span class="detail-value">€' + Math.round(annualBIK).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].monthlyTax + '</span><span class="detail-value">€' + Math.round(netMonthlyCost).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].rszLostMonth + '</span><span class="detail-value highlight">€' + Math.round(monthlyRSZLost).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].co2TaxYear + '</span><span class="detail-value">€' + Math.round(solidarityContribution).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '</div>';
|
|
carComparisonHTML += '<div class="monthly-loss-box">';
|
|
|
|
// Show lease period impact if specified
|
|
if (leaseDuration > 0) {
|
|
carComparisonHTML += '<div style="margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">';
|
|
carComparisonHTML += '<div style="font-size: 0.9rem; font-weight: 600; color: #059669; margin-bottom: 8px;">📅 ' + leaseDuration + '-Year Lease Impact:</div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].monthlyPensionLoss + '</span><span class="detail-value pension-loss">-€' + Math.round(car.monthlyLossLease) + translations[currentLanguage]['units.perMonth'] + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].totalLifetimeLoss + '</span><span class="detail-value">€' + Math.round(car.totalLossLease).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '</div>';
|
|
|
|
carComparisonHTML += '<div>';
|
|
carComparisonHTML += '<div style="font-size: 0.9rem; font-weight: 600; color: #dc2626; margin-bottom: 8px;">⚠️ If Continued Until Retirement:</div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].monthlyPensionLoss + '</span><span class="detail-value pension-loss" style="color: #dc2626;">-€' + Math.round(car.monthlyLossFull) + translations[currentLanguage]['units.perMonth'] + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label">' + labels[currentLanguage].totalLifetimeLoss + '</span><span class="detail-value" style="color: #dc2626;">€' + Math.round(car.totalLossFull).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += '</div>';
|
|
} else {
|
|
// Original display for full career
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-weight: 500;">' + labels[currentLanguage].monthlyPensionLoss + '</span><span class="detail-value pension-loss">-€' + Math.round(monthlyPensionLoss) + translations[currentLanguage]['units.perMonth'] + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row"><span class="detail-label" style="font-size: 0.85rem;">' + labels[currentLanguage].duringRetirement + '</span><span class="detail-value" style="font-size: 0.85rem;">' + labels[currentLanguage].everyMonthFor + ' ' + retirementYears + ' ' + labels[currentLanguage].years + '</span></div>';
|
|
carComparisonHTML += '<div class="detail-row" style="margin-top: 12px;"><span class="detail-label">' + labels[currentLanguage].totalLifetimeLoss + '</span><span class="detail-value pension-loss">€' + Math.round(totalPensionLoss).toLocaleString() + '</span></div>';
|
|
carComparisonHTML += presentValueRow;
|
|
}
|
|
|
|
carComparisonHTML += '</div>';
|
|
carComparisonHTML += '</div>';
|
|
|
|
// Store data for yearly breakdown
|
|
if (showYearlyBreakdown && yearlyData.length === 0) {
|
|
for (let year = 1; year <= 5; year++) {
|
|
yearlyData.push({
|
|
year: currentAge + year,
|
|
salary: Math.round(grossSalary * 12 * Math.pow(1 + salaryGrowth, year)),
|
|
bikValue: Math.round(annualBIK),
|
|
rszLost: Math.round(annualRSZLost * Math.pow(1 + salaryGrowth, year)),
|
|
projectedPensionLoss: Math.round(monthlyPensionLoss * Math.pow(1 + inflation, year))
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
document.getElementById('car-comparison').innerHTML = carComparisonHTML;
|
|
|
|
// Mobility budget comparison
|
|
if (mobilityBudget) {
|
|
const mobilityText = {
|
|
en: {
|
|
title: "Mobility Budget Alternative",
|
|
text: "With a mobility budget, the cash-out portion is subject to 38.07% solidarity contribution that <strong>does count for pension rights</strong>. This significantly reduces pension loss compared to a traditional company vehicle. The remaining amount after the 38.07% contribution is yours to keep tax-free."
|
|
},
|
|
fr: {
|
|
title: "Alternative Budget Mobilité",
|
|
text: "Avec un budget mobilité, la partie en espèces est soumise à une contribution de solidarité de 38,07% qui <strong>compte pour les droits à la pension</strong>. Cela réduit considérablement la perte de pension par rapport à un véhicule de société traditionnel. Le montant restant après la contribution de 38,07% vous revient sans taxe."
|
|
},
|
|
nl: {
|
|
title: "Mobiliteitsbudget Alternatief",
|
|
text: "Met een mobiliteitsbudget is het cash-out gedeelte onderworpen aan 38,07% solidariteitsbijdrage die <strong>wel meetelt voor pensioenrechten</strong>. Dit vermindert het pensioenverlies aanzienlijk vergeleken met een traditionele bedrijfswagen. Het resterende bedrag na de 38,07% bijdrage is belastingvrij voor u."
|
|
}
|
|
};
|
|
|
|
const mobilityHTML = '<div class="info-box" style="background: #d1fae5; border-left-color: #10b981;"><h4>' + mobilityText[currentLanguage].title + '</h4><p>' + mobilityText[currentLanguage].text + '</p></div>';
|
|
document.getElementById('mobility-budget-comparison').innerHTML = mobilityHTML;
|
|
document.getElementById('mobility-budget-comparison').style.display = 'block';
|
|
}
|
|
|
|
// Create summary with monthly loss emphasis
|
|
const avgLoss = (maxLoss + minLoss) / 2;
|
|
const avgMonthlyLoss = (minMonthlyLoss + maxMonthlyLoss) / 2;
|
|
|
|
const summaryLabels = {
|
|
en: {
|
|
monthlyImpact: "Monthly Pension Impact During Retirement",
|
|
totalLifetime: "Total Lifetime Impact",
|
|
bestCase: "Best Case<br>Smallest monthly loss",
|
|
average: "Average<br>Typical monthly loss",
|
|
worstCase: "Worst Case<br>Largest monthly loss",
|
|
duration: "Duration<br>Monthly loss period",
|
|
leaseDuration: "Lease Period<br>Company car duration",
|
|
minimumTotal: "Minimum Total<br>Best scenario",
|
|
averageTotal: "Average Total<br>All analyzed vehicles",
|
|
maximumTotal: "Maximum Total<br>Worst scenario",
|
|
workRetirement: "Work Years<br>Retirement Years",
|
|
summary: "Summary:",
|
|
during: "During your",
|
|
yearsText: "years of retirement, you'll receive",
|
|
lessPerMonth: "less per month",
|
|
inPensionIncome: "in pension income because the company vehicle benefit doesn't contribute to your pension calculation.",
|
|
overEntireRetirement: "Over your entire retirement, this adds up to",
|
|
figuresIncludeInflation: "These figures include inflation adjustments. You can modify all parameters in the Advanced Options section."
|
|
},
|
|
fr: {
|
|
monthlyImpact: "Impact Mensuel sur la Pension Pendant la Retraite",
|
|
totalLifetime: "Impact Total à Vie",
|
|
bestCase: "Meilleur Cas<br>Perte mensuelle minimale",
|
|
average: "Moyenne<br>Perte mensuelle typique",
|
|
worstCase: "Pire Cas<br>Perte mensuelle maximale",
|
|
duration: "Durée<br>Période de perte mensuelle",
|
|
leaseDuration: "Période de Contrat<br>Durée voiture de société",
|
|
minimumTotal: "Total Minimum<br>Meilleur scénario",
|
|
averageTotal: "Total Moyen<br>Tous véhicules analysés",
|
|
maximumTotal: "Total Maximum<br>Pire scénario",
|
|
workRetirement: "Années Travail<br>Années Retraite",
|
|
summary: "Résumé :",
|
|
during: "Pendant vos",
|
|
yearsText: "années de retraite, vous recevrez",
|
|
lessPerMonth: "de moins par mois",
|
|
inPensionIncome: "en revenu de pension car l'avantage véhicule de société ne contribue pas à votre calcul de pension.",
|
|
overEntireRetirement: "Sur toute votre retraite, cela représente",
|
|
figuresIncludeInflation: "Ces chiffres incluent les ajustements d'inflation. Vous pouvez modifier tous les paramètres dans la section Options Avancées."
|
|
},
|
|
nl: {
|
|
monthlyImpact: "Maandelijkse Pensioenimpact Tijdens Pensioen",
|
|
totalLifetime: "Totale Levenslange Impact",
|
|
bestCase: "Beste Geval<br>Kleinste maandelijkse verlies",
|
|
average: "Gemiddeld<br>Typisch maandelijks verlies",
|
|
worstCase: "Slechtste Geval<br>Grootste maandelijkse verlies",
|
|
duration: "Duur<br>Maandelijkse verliesperiode",
|
|
leaseDuration: "Leaseperiode<br>Bedrijfswagen duur",
|
|
minimumTotal: "Minimum Totaal<br>Beste scenario",
|
|
averageTotal: "Gemiddeld Totaal<br>Alle geanalyseerde voertuigen",
|
|
maximumTotal: "Maximum Totaal<br>Slechtste scenario",
|
|
workRetirement: "Werkjaren<br>Pensioenjaren",
|
|
summary: "Samenvatting:",
|
|
during: "Tijdens uw",
|
|
yearsText: "jaar pensioen ontvangt u",
|
|
lessPerMonth: "minder per maand",
|
|
inPensionIncome: "aan pensioeninkomen omdat het bedrijfswagen voordeel niet bijdraagt aan uw pensioenberekening.",
|
|
overEntireRetirement: "Over uw gehele pensioen komt dit neer op",
|
|
figuresIncludeInflation: "Deze cijfers bevatten inflatie-aanpassingen. U kunt alle parameters aanpassen in de sectie Geavanceerde Opties."
|
|
}
|
|
};
|
|
|
|
// Check if single or multiple cars
|
|
const isSingleCar = carsToAnalyze.length === 1;
|
|
|
|
let summaryHTML = '<h3>' + summaryLabels[currentLanguage].monthlyImpact + '</h3>';
|
|
summaryHTML += '<div class="summary-grid" style="margin-bottom: 32px;">';
|
|
|
|
// Determine what to show for duration
|
|
const displayDuration = leaseDuration === 0 ? retirementYears + ' ' + labels[currentLanguage].years : leaseDuration + ' ' + labels[currentLanguage].years;
|
|
const durationLabel = leaseDuration === 0 ? summaryLabels[currentLanguage].duration : summaryLabels[currentLanguage].leaseDuration;
|
|
|
|
if (isSingleCar) {
|
|
// Single car - show only the actual value without ranges
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #212529;">-€' + Math.round(minMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].monthlyImpact + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">' + displayDuration + '</div><div class="summary-label">' + durationLabel + '</div></div>';
|
|
} else {
|
|
// Multiple cars - show best/average/worst
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #28a745;">-€' + Math.round(minMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].bestCase + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #6c757d;">-€' + Math.round(avgMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].average + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value" style="color: #dc3545;">-€' + Math.round(maxMonthlyLoss) + translations[currentLanguage]['units.perMo'] + '</div><div class="summary-label">' + summaryLabels[currentLanguage].worstCase + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">' + displayDuration + '</div><div class="summary-label">' + durationLabel + '</div></div>';
|
|
}
|
|
summaryHTML += '</div>';
|
|
|
|
summaryHTML += '<h3>' + summaryLabels[currentLanguage].totalLifetime + '</h3>';
|
|
summaryHTML += '<div class="summary-grid">';
|
|
|
|
if (isSingleCar) {
|
|
// Single car - show only the actual total
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">€' + Math.round(minLoss).toLocaleString() + '</div><div class="summary-label">' + summaryLabels[currentLanguage].totalLifetime + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">' + yearsWork + ' / ' + retirementYears + '</div><div class="summary-label">' + summaryLabels[currentLanguage].workRetirement + '</div></div>';
|
|
} else {
|
|
// Multiple cars - show min/avg/max totals
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">€' + Math.round(minLoss).toLocaleString() + '</div><div class="summary-label">' + summaryLabels[currentLanguage].minimumTotal + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">€' + Math.round(avgLoss).toLocaleString() + '</div><div class="summary-label">' + summaryLabels[currentLanguage].averageTotal + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">€' + Math.round(maxLoss).toLocaleString() + '</div><div class="summary-label">' + summaryLabels[currentLanguage].maximumTotal + '</div></div>';
|
|
summaryHTML += '<div class="summary-item"><div class="summary-value">' + yearsWork + ' / ' + retirementYears + '</div><div class="summary-label">' + summaryLabels[currentLanguage].workRetirement + '</div></div>';
|
|
}
|
|
summaryHTML += '</div>';
|
|
|
|
summaryHTML += '<div class="info-box warning" style="margin-top: 24px;">';
|
|
|
|
// Add lease duration context if applicable
|
|
if (leaseDuration > 0) {
|
|
const leaseContext = {
|
|
en: `<p style="margin: 0 0 16px 0; padding: 12px; background: #f3f4f6; border-left: 4px solid #059669; border-radius: 4px;"><strong>📅 Analysis Period:</strong> Based on ${leaseDuration}-year company car lease. Pension impacts shown reflect this limited period, but actual pension effects are PERMANENT once incurred.</p>`,
|
|
fr: `<p style="margin: 0 0 16px 0; padding: 12px; background: #f3f4f6; border-left: 4px solid #059669; border-radius: 4px;"><strong>📅 Période d'Analyse:</strong> Basé sur un contrat de ${leaseDuration} ans. Les impacts pension montrés reflètent cette période limitée, mais les effets réels sur la pension sont PERMANENTS une fois encourus.</p>`,
|
|
nl: `<p style="margin: 0 0 16px 0; padding: 12px; background: #f3f4f6; border-left: 4px solid #059669; border-radius: 4px;"><strong>📅 Analyseperiode:</strong> Gebaseerd op ${leaseDuration}-jarig bedrijfswagen contract. Getoonde pensioenimpacten reflecteren deze beperkte periode, maar echte pensioeneffecten zijn PERMANENT eenmaal opgelopen.</p>`
|
|
};
|
|
summaryHTML += leaseContext[currentLanguage];
|
|
}
|
|
|
|
summaryHTML += '<p style="margin: 0;"><strong>' + summaryLabels[currentLanguage].summary + '</strong> ' + summaryLabels[currentLanguage].during + ' ' + retirementYears + ' ' + summaryLabels[currentLanguage].yearsText + ' ';
|
|
|
|
if (isSingleCar) {
|
|
// Single car - show single value
|
|
summaryHTML += '<strong>€' + Math.round(minMonthlyLoss) + ' ' + summaryLabels[currentLanguage].lessPerMonth + '</strong> ' + summaryLabels[currentLanguage].inPensionIncome + ' ';
|
|
summaryHTML += summaryLabels[currentLanguage].overEntireRetirement + ' €' + Math.round(minLoss).toLocaleString() + '.';
|
|
} else {
|
|
// Multiple cars - show range
|
|
summaryHTML += '<strong>€' + Math.round(minMonthlyLoss) + ' - €' + Math.round(maxMonthlyLoss) + ' ' + summaryLabels[currentLanguage].lessPerMonth + '</strong> ' + summaryLabels[currentLanguage].inPensionIncome + ' ';
|
|
summaryHTML += summaryLabels[currentLanguage].overEntireRetirement + ' €' + Math.round(minLoss).toLocaleString() + ' - €' + Math.round(maxLoss).toLocaleString() + '.';
|
|
}
|
|
|
|
if (includeInflation) summaryHTML += ' ' + summaryLabels[currentLanguage].figuresIncludeInflation;
|
|
summaryHTML += '</p></div>';
|
|
|
|
document.getElementById('summary').innerHTML = summaryHTML;
|
|
|
|
// Yearly breakdown table
|
|
if (showYearlyBreakdown && yearlyData.length > 0) {
|
|
const tableHeaders = {
|
|
en: ["Age", "Annual Salary", "BIK Value", "RSZ Lost", "Monthly Pension Impact"],
|
|
fr: ["Âge", "Salaire Annuel", "Valeur AEN", "RSZ Perdu", "Impact Pension Mensuel"],
|
|
nl: ["Leeftijd", "Jaarsalaris", "VAA Waarde", "RSZ Verlies", "Maandelijkse Pensioenimpact"]
|
|
};
|
|
|
|
let tableHTML = '<thead><tr>';
|
|
tableHeaders[currentLanguage].forEach(header => {
|
|
tableHTML += '<th>' + header + '</th>';
|
|
});
|
|
tableHTML += '</tr></thead><tbody>';
|
|
|
|
yearlyData.forEach(data => {
|
|
tableHTML += '<tr><td>' + data.year + '</td><td>€' + data.salary.toLocaleString() + '</td><td>€' + data.bikValue.toLocaleString() + '</td><td>€' + data.rszLost.toLocaleString() + '</td><td>€' + data.projectedPensionLoss.toLocaleString() + '</td></tr>';
|
|
});
|
|
|
|
tableHTML += '</tbody>';
|
|
document.getElementById('projection-table').innerHTML = tableHTML;
|
|
document.getElementById('yearly-breakdown').style.display = 'block';
|
|
}
|
|
|
|
document.getElementById('results').style.display = 'block';
|
|
document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
// Initialize when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize translation system first
|
|
switchLanguage('en');
|
|
|
|
// Setup event listeners
|
|
setupEventListeners();
|
|
|
|
// Initialize basic calculations
|
|
updateYearsToWork();
|
|
updateRetirementYears();
|
|
|
|
// Initialize vehicle search system immediately since it's now in the main interface
|
|
vehicleAutocomplete = new VehicleSearchAutocomplete('vehicle-autocomplete-container', function(vehicleData) {
|
|
console.log('Vehicle selected:', vehicleData);
|
|
});
|
|
|
|
// Add event listeners for essential field monitoring
|
|
const essentialFields = ['gross-salary', 'current-age', 'tax-rate', 'marital-status', 'lease-duration'];
|
|
essentialFields.forEach(fieldId => {
|
|
const element = document.getElementById(fieldId);
|
|
if (element) {
|
|
element.addEventListener('input', checkEssentialFields);
|
|
element.addEventListener('change', checkEssentialFields);
|
|
}
|
|
});
|
|
|
|
// Initial check on page load - start with vehicle section disabled
|
|
setTimeout(() => {
|
|
disableVehicleSelection(); // Start with vehicle section disabled
|
|
checkEssentialFields(); // Check if essential fields are filled
|
|
checkVehicleSelected(); // Check vehicle status
|
|
}, 200); // Increased timeout to ensure vehicleAutocomplete is initialized
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |