nokker
5d86958186
- Remove progress step indicators (Fill Essential Info, Select Car, Calculate Impact) - Clean up interface by removing STEP badges from sections - Improve mobile responsive design with better touch targets - Fix JavaScript errors with safer element selectors - Create collapsible Advanced Options and Calculated Parameters sections - Position both sections above calculate button in responsive side-by-side layout - Remove gear icon from Calculated Parameters for cleaner design - Add mobile-first CSS with proper breakpoints and touch improvements - Enhance form validation and field monitoring without visual step clutter - Preserve tax-old.html as backup of previous tabbed interface - Maintain all calculation functionality while streamlining user flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1922 lines
95 KiB
HTML
1922 lines
95 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;
|
|
}
|
|
|
|
/* Removed tab CSS - using single page layout now */
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.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">
|
|
<!-- Mandatory User Inputs -->
|
|
<div class="input-section">
|
|
<div class="section-title" data-i18n="section.required">📝 Required Information</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" value="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" value="35" min="20" max="65" required>
|
|
<small data-i18n="help.currentAge">Your age today</small>
|
|
</div>
|
|
|
|
<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" required>
|
|
<small data-i18n="help.retirementAge">Expected retirement age</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="marital-status" data-i18n="label.maritalStatus">Marital Status *</label>
|
|
<select id="marital-status" required>
|
|
<option value="single" data-i18n="option.single">Single / Double Income</option>
|
|
<option value="married" data-i18n="option.married">Married (single income)</option>
|
|
</select>
|
|
<small data-i18n="help.maritalStatus">Affects pension calculation rate</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="tax-rate" data-i18n="label.taxRate">Income Tax Rate *</label>
|
|
<input type="number" id="tax-rate" value="45" min="25" max="50" step="0.5" required>
|
|
<small data-i18n="help.taxRate">Your marginal tax rate percentage</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vehicle Selection -->
|
|
<div class="input-section">
|
|
<div class="section-title" data-i18n="section.vehicles">🚗 Select Your Company Cars</div>
|
|
<div id="vehicle-autocomplete-container"></div>
|
|
<div id="custom-cars-list" style="margin-top: 24px;"></div>
|
|
</div>
|
|
|
|
<!-- Auto-calculated fields (modifiable) -->
|
|
<div class="input-section">
|
|
<div class="section-title" data-i18n="section.calculated">⚙️ Calculated Parameters (Adjustable)</div>
|
|
|
|
<div class="input-row">
|
|
<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 class="input-group">
|
|
<label for="lease-duration" data-i18n="label.leaseDuration">Company Car Duration</label>
|
|
<select id="lease-duration">
|
|
<option value="0" data-i18n="option.untilRetirement">Until Retirement</option>
|
|
<option value="3">3 years</option>
|
|
<option value="4">4 years</option>
|
|
<option value="5" selected>5 years</option>
|
|
<option value="7">7 years</option>
|
|
<option value="10">10 years</option>
|
|
</select>
|
|
<small data-i18n="help.leaseDuration">How long you'll have the company car</small>
|
|
</div>
|
|
|
|
<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="87" min="70" max="100">
|
|
<small data-i18n="help.lifeExpectancy">Updates retirement years automatically</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Calculate Button -->
|
|
<div style="text-align: center; margin: 32px 0;">
|
|
<button class="calculate-btn" onclick="calculatePensionLoss()" data-i18n="button.calculate">Calculate Pension Impact</button>
|
|
</div>
|
|
|
|
<!-- Advanced Options (Collapsible) -->
|
|
<details class="advanced-options" style="margin-top: 32px; border: 1px solid #dee2e6; border-radius: 8px; padding: 0;">
|
|
<summary style="padding: 16px; background: #f8f9fa; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 500;">
|
|
⚙️ <span data-i18n="section.advancedOptions">Advanced Options</span>
|
|
</summary>
|
|
<div style="padding: 16px;">
|
|
<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</label>
|
|
<input type="number" id="inflation" value="2" min="0" max="10" step="0.5">
|
|
<small data-i18n="help.inflation">Expected annual inflation rate percentage</small>
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="discount-rate" data-i18n="label.discountRate">Discount Rate</label>
|
|
<input type="number" id="discount-rate" value="3" min="0" max="10" step="0.5">
|
|
<small data-i18n="help.discountRate">For present value calculations 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: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;">
|
|
<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>
|
|
</details>
|
|
</div>
|
|
</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: 60% (single) or 75% (married) 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.required": "📝 Required Information",
|
|
"section.vehicles": "🚗 Select Your Company Cars",
|
|
"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 / Double Income",
|
|
"option.married": "Married (single income)",
|
|
"option.no": "No",
|
|
"option.yes": "Yes - Show comparison",
|
|
"option.untilRetirement": "Until Retirement",
|
|
"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: 60% (single) or 75% (married) 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.required": "📝 Informations Obligatoires",
|
|
"section.vehicles": "🚗 Sélectionnez vos Voitures de Société",
|
|
"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 / Double Revenu",
|
|
"option.married": "Marié (revenu unique)",
|
|
"option.no": "Non",
|
|
"option.yes": "Oui - Afficher la comparaison",
|
|
"option.untilRetirement": "Jusqu'à la Retraite",
|
|
"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 : 60% (célibataire) ou 75% (marié) 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.required": "📝 Verplichte Informatie",
|
|
"section.vehicles": "🚗 Selecteer uw Bedrijfswagens",
|
|
"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 / Dubbel Inkomen",
|
|
"option.married": "Getrouwd (enkel inkomen)",
|
|
"option.no": "Nee",
|
|
"option.yes": "Ja - Toon vergelijking",
|
|
"option.untilRetirement": "Tot Pensioen",
|
|
"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: 60% (alleenstaand) of 75% (getrouwd) 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
|
|
const maritalSelect = document.getElementById('marital-status');
|
|
if (maritalSelect) {
|
|
const maritalOptions = maritalSelect.querySelectorAll('option');
|
|
maritalOptions[0].textContent = translations[currentLanguage]['option.single'];
|
|
maritalOptions[1].textContent = translations[currentLanguage]['option.married'];
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Removed switchTab function - no longer using tabs
|
|
|
|
function validateRequiredFields() {
|
|
const requiredFields = [
|
|
{id: 'gross-salary', name: 'Gross Monthly Salary'},
|
|
{id: 'current-age', name: 'Current Age'},
|
|
{id: 'retirement-age', name: 'Retirement Age'},
|
|
{id: 'tax-rate', name: 'Income Tax Rate'},
|
|
{id: 'marital-status', name: 'Marital Status'}
|
|
];
|
|
|
|
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();
|
|
|
|
// 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();
|
|
}
|
|
|
|
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;
|
|
const pensionMultiplier = maritalStatus === "married" ? 0.75 : 0.60;
|
|
|
|
// 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."
|
|
},
|
|
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."
|
|
},
|
|
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."
|
|
}
|
|
};
|
|
|
|
// 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);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |