Energie Aanvraag Formulier<\/title>\n <style>\n :root {\n --primary: #10b981;\n --primary-hover: #059669;\n --primary-light: #d1fae5;\n --error: #ef4444;\n --error-light: #fee2e2;\n --warning: #f59e0b;\n --warning-light: #fef3c7;\n --gray-50: #f9fafb;\n --gray-100: #f3f4f6;\n --gray-200: #e5e7eb;\n --gray-300: #d1d5db;\n --gray-400: #9ca3af;\n --gray-500: #6b7290;\n --gray-600: #4b5563;\n --gray-700: #374151;\n --gray-800: #1f2937;\n --gray-900: #111827;\n }\n\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n background: transparent;\n min-height: 100vh;\n padding: 0;\n margin: 0;\n color: var(--gray-800);\n }\n\n .form-container {\n width: 100%;\n max-width: 100%;\n margin: 0;\n background: white;\n border-radius: 0;\n box-shadow: none;\n overflow: hidden;\n }\n\n .form-header {\n background: white;\n color: #1a4d1a;\n padding: 2rem;\n text-align: left;\n border-bottom: 1px solid var(--gray-200);\n }\n\n .form-header h1 {\n font-size: 1.75rem;\n font-weight: 700;\n margin-bottom: 0;\n color: #1a4d1a;\n }\n\n .form-header p {\n color: var(--gray-600);\n font-size: 0.95rem;\n margin-top: 0.5rem;\n }\n\n .form-body {\n padding: 2rem;\n }\n\n .form-section {\n margin-bottom: 2rem;\n }\n\n .form-section:last-child {\n margin-bottom: 0;\n }\n\n .section-title {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--gray-700);\n margin-bottom: 1rem;\n padding-bottom: 0.5rem;\n border-bottom: 2px solid var(--primary-light);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .section-title svg {\n width: 20px;\n height: 20px;\n color: var(--primary);\n }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 1rem;\n }\n\n .form-row.three-cols {\n grid-template-columns: 1fr 1fr 1fr;\n }\n\n .form-row.four-cols-address {\n grid-template-columns: 1fr 1fr 1fr auto;\n align-items: end;\n }\n\n @media (max-width: 600px) {\n .form-row {\n grid-template-columns: 1fr;\n }\n .form-row.three-cols {\n grid-template-columns: 1fr;\n }\n .form-row.four-cols-address {\n grid-template-columns: 1fr;\n }\n .form-row.four-cols-address .check-button-group {\n margin-top: 0.5rem;\n }\n .form-row.four-cols-address .check-button-group label {\n display: none;\n }\n }\n\n \/* Controleer gegevens knop *\/\n .check-button-group {\n display: flex !important;\n flex-direction: column !important;\n justify-content: flex-end !important;\n }\n\n .check-button-group label {\n visibility: hidden !important;\n height: 1.25rem !important;\n }\n\n .check-address-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 0.5rem !important;\n padding: 0.75rem 1.25rem !important;\n font-size: 0.9rem !important;\n font-weight: 500 !important;\n color: var(--primary) !important;\n background: white !important;\n border: 1.5px solid var(--primary) !important;\n border-radius: 8px !important;\n cursor: pointer !important;\n transition: background 0.2s ease, color 0.2s ease !important;\n white-space: nowrap !important;\n height: 46px !important;\n min-width: 175px !important;\n box-sizing: border-box !important;\n }\n\n .check-address-btn:hover:not(:disabled) {\n background: var(--primary-light) !important;\n color: var(--primary-hover) !important;\n }\n\n .check-address-btn:disabled {\n color: var(--gray-400) !important;\n border-color: var(--gray-300) !important;\n background: var(--gray-100) !important;\n cursor: not-allowed !important;\n }\n\n .check-address-btn.loading {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n background: var(--primary-light) !important;\n cursor: wait !important;\n }\n\n .check-address-btn .check-btn-text {\n display: inline !important;\n }\n\n .check-address-btn .check-btn-spinner {\n display: none !important;\n width: 18px !important;\n height: 18px !important;\n border: 2px solid rgba(16, 185, 129, 0.3) !important;\n border-top-color: var(--primary) !important;\n border-radius: 50% !important;\n animation: spin 0.8s linear infinite !important;\n flex-shrink: 0 !important;\n }\n\n .check-address-btn.loading .check-btn-text {\n display: none !important;\n }\n\n .check-address-btn.loading .check-btn-spinner {\n display: inline-block !important;\n }\n\n .form-group {\n margin-bottom: 1rem;\n }\n\n .form-group.full-width {\n grid-column: 1 \/ -1;\n }\n\n label {\n display: block;\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--gray-700);\n margin-bottom: 0.375rem;\n }\n\n label .required {\n color: var(--error);\n }\n\n input[type=\"text\"],\n input[type=\"email\"],\n input[type=\"tel\"],\n input[type=\"number\"],\n input[type=\"date\"],\n select {\n width: 100%;\n padding: 0.75rem 1rem;\n font-size: 1rem;\n border: 1.5px solid var(--gray-300);\n border-radius: 8px;\n background: white;\n transition: all 0.2s ease;\n color: var(--gray-800);\n }\n\n input:focus,\n select:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);\n }\n\n input:read-only {\n background: var(--gray-100);\n cursor: not-allowed;\n color: var(--gray-600);\n }\n\n input.error,\n select.error {\n border-color: var(--error);\n background: var(--error-light);\n }\n\n input.valid {\n border-color: var(--primary);\n }\n\n .error-message {\n font-size: 0.8rem;\n color: var(--error);\n margin-top: 0.25rem;\n display: none;\n }\n\n .error-message.visible {\n display: block;\n }\n\n \/* ============================================\n BEDRIJFSZOEKER STYLING\n ============================================ *\/\n \n .search-container {\n position: relative;\n margin-bottom: 1rem;\n }\n\n .search-input-wrapper {\n position: relative;\n }\n\n .search-input-wrapper input {\n padding-right: 2.5rem;\n }\n\n .search-icon {\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n color: var(--gray-400);\n pointer-events: none;\n }\n\n .search-spinner {\n position: absolute;\n right: 0.75rem;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n border: 2px solid var(--primary-light);\n border-top-color: var(--primary);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n \/* Zoekresultaten dropdown *\/\n .search-results {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n border: 1.5px solid var(--gray-300);\n border-top: none;\n border-radius: 0 0 8px 8px;\n max-height: 300px;\n overflow-y: auto;\n z-index: 100;\n display: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n\n .search-results.visible {\n display: block;\n }\n\n .search-result-item {\n padding: 0.75rem 1rem;\n cursor: pointer;\n border-bottom: 1px solid var(--gray-100);\n transition: background 0.15s ease;\n }\n\n .search-result-item:last-child {\n border-bottom: none;\n }\n\n .search-result-item:hover {\n background: var(--primary-light);\n }\n\n .search-result-name {\n font-weight: 600;\n color: var(--gray-800);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .search-result-name svg {\n width: 16px;\n height: 16px;\n color: var(--primary);\n flex-shrink: 0;\n }\n\n .search-result-address {\n font-size: 0.85rem;\n color: var(--gray-500);\n margin-top: 0.25rem;\n padding-left: 1.5rem;\n }\n\n .search-result-kvk {\n font-size: 0.75rem;\n color: var(--gray-400);\n margin-top: 0.125rem;\n padding-left: 1.5rem;\n }\n\n .search-no-results {\n padding: 1rem;\n text-align: center;\n color: var(--gray-500);\n font-size: 0.9rem;\n }\n\n \/* Laat meer zien knop *\/\n .search-load-more {\n padding: 0.75rem 1rem;\n border-top: 1px solid var(--gray-200);\n text-align: center;\n }\n\n .search-load-more button {\n background: none;\n border: 1px solid var(--primary);\n color: var(--primary);\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-size: 0.875rem;\n cursor: pointer;\n transition: all 0.2s ease;\n font-weight: 500;\n }\n\n .search-load-more button:hover {\n background: var(--primary);\n color: white;\n }\n\n \/* Adres incomplete melding *\/\n .address-incomplete-notice {\n background: var(--warning-light);\n border: 1px solid var(--warning);\n border-radius: 8px;\n padding: 0.75rem 1rem;\n margin-bottom: 1rem;\n display: none;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n color: var(--warning);\n }\n\n .address-incomplete-notice.visible {\n display: flex;\n }\n\n .address-incomplete-notice svg {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n \/* Geselecteerd bedrijf card *\/\n .selected-company {\n background: var(--primary-light);\n border: 1px solid var(--primary);\n border-radius: 8px;\n padding: 1rem;\n margin-bottom: 1rem;\n display: none;\n animation: fadeIn 0.3s ease;\n }\n\n .selected-company.visible {\n display: block;\n }\n\n .selected-company-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 0.5rem;\n }\n\n .selected-company-label {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--primary-hover);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 0.375rem;\n }\n\n .selected-company-label svg {\n width: 14px;\n height: 14px;\n }\n\n .selected-company-clear {\n background: none;\n border: none;\n color: var(--gray-500);\n cursor: pointer;\n padding: 0.25rem;\n border-radius: 4px;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .selected-company-clear:hover {\n background: rgba(0, 0, 0, 0.1);\n color: var(--gray-700);\n }\n\n .selected-company-clear svg {\n width: 18px;\n height: 18px;\n }\n\n .selected-company-name {\n font-weight: 600;\n font-size: 1.1rem;\n color: var(--gray-800);\n }\n\n .selected-company-details {\n font-size: 0.9rem;\n color: var(--gray-600);\n margin-top: 0.25rem;\n }\n\n .selected-company-kvk {\n font-size: 0.85rem;\n color: var(--gray-500);\n margin-top: 0.25rem;\n }\n\n \/* Handmatig invullen link *\/\n .manual-entry-toggle {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 0.5rem !important;\n padding: 0.75rem 1.25rem !important;\n font-size: 0.9rem !important;\n font-weight: 500 !important;\n color: var(--gray-600) !important;\n background: white !important;\n border: 1.5px solid var(--gray-300) !important;\n border-radius: 8px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n margin-top: 0.75rem !important;\n height: 44px !important;\n box-sizing: border-box !important;\n }\n\n .manual-entry-toggle:hover {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n background: var(--gray-50) !important;\n }\n\n .manual-entry-toggle svg {\n width: 16px !important;\n height: 16px !important;\n transition: transform 0.2s ease !important;\n flex-shrink: 0 !important;\n }\n\n .manual-entry-toggle.expanded {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n background: var(--primary-light) !important;\n }\n\n .manual-entry-toggle.expanded svg {\n transform: rotate(180deg) !important;\n }\n\n \/* Handmatige invoer sectie *\/\n .manual-entry-section {\n display: none;\n margin-top: 1rem;\n padding: 1rem;\n background: var(--gray-50);\n border-radius: 8px;\n border: 1px solid var(--gray-200);\n animation: slideDown 0.3s ease;\n }\n\n .manual-entry-section.visible {\n display: block;\n }\n\n .manual-entry-section .form-row {\n margin-bottom: 0;\n }\n\n .manual-entry-confirm {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 0.5rem !important;\n margin-top: 1rem !important;\n padding: 0.75rem 1.25rem !important;\n font-size: 0.9rem !important;\n font-weight: 500 !important;\n color: white !important;\n background: var(--primary) !important;\n border: 1.5px solid var(--primary) !important;\n border-radius: 8px !important;\n cursor: pointer !important;\n transition: all 0.2s ease !important;\n height: 44px !important;\n box-sizing: border-box !important;\n }\n\n .manual-entry-confirm:hover {\n background: var(--primary-hover) !important;\n border-color: var(--primary-hover) !important;\n }\n\n \/* Status indicator *\/\n .status-indicator {\n padding: 0.75rem 1rem !important;\n border-radius: 8px !important;\n margin-bottom: 1rem !important;\n display: none !important;\n align-items: center !important;\n gap: 0.75rem !important;\n font-weight: 500 !important;\n animation: fadeIn 0.3s ease;\n white-space: nowrap !important;\n width: fit-content !important;\n max-width: 100% !important;\n height: auto !important;\n min-height: unset !important;\n max-height: unset !important;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .status-indicator.visible {\n display: inline-flex !important;\n }\n\n .status-indicator #statusIcon {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n width: 24px !important;\n height: 24px !important;\n flex-shrink: 0 !important;\n }\n\n .status-indicator #statusText {\n line-height: 1.4 !important;\n white-space: nowrap !important;\n }\n\n .status-indicator.zakelijk {\n background: var(--primary-light) !important;\n color: var(--primary-hover) !important;\n border: 1px solid var(--primary) !important;\n }\n\n .status-indicator.particulier {\n background: var(--error-light) !important;\n color: var(--error) !important;\n border: 1px solid var(--error) !important;\n }\n\n .status-indicator.handmatig {\n background: var(--warning-light) !important;\n color: var(--warning) !important;\n border: 1px solid var(--warning) !important;\n }\n\n .status-indicator.loading {\n background: var(--primary-light) !important;\n color: var(--primary-hover) !important;\n border: 1px solid var(--primary) !important;\n }\n\n .status-indicator svg {\n width: 24px !important;\n height: 24px !important;\n flex-shrink: 0 !important;\n }\n\n \/* Spinner *\/\n .spinner {\n width: 24px !important;\n height: 24px !important;\n border: 3px solid var(--primary-light) !important;\n border-top-color: var(--primary) !important;\n border-radius: 50% !important;\n animation: spin 0.8s linear infinite !important;\n flex-shrink: 0 !important;\n background: transparent !important;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n\n \/* Radio buttons *\/\n .radio-group {\n display: flex;\n gap: 1.5rem;\n margin-top: 0.5rem;\n }\n\n .radio-option {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n }\n\n .radio-option input[type=\"radio\"] {\n width: 18px;\n height: 18px;\n accent-color: var(--primary);\n cursor: pointer;\n }\n\n \/* File upload *\/\n .file-upload {\n position: relative;\n }\n\n .file-upload-label {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 1.5rem;\n border: 2px dashed var(--gray-300);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--gray-50);\n }\n\n .file-upload-label:hover {\n border-color: var(--primary);\n background: var(--primary-light);\n }\n\n .file-upload-label svg {\n width: 32px;\n height: 32px;\n color: var(--gray-400);\n margin-bottom: 0.5rem;\n }\n\n .file-upload-label span {\n font-size: 0.875rem;\n color: var(--gray-500);\n }\n\n .file-upload input[type=\"file\"] {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n opacity: 0;\n cursor: pointer;\n }\n\n .file-name {\n margin-top: 0.5rem;\n font-size: 0.85rem;\n color: var(--primary-hover);\n font-weight: 500;\n }\n\n \/* Submit button *\/\n .submit-btn {\n display: inline-flex !important;\n align-items: center !important;\n justify-content: center !important;\n gap: 0.5rem !important;\n width: 100% !important;\n padding: 1rem 2rem !important;\n font-size: 1.1rem !important;\n font-weight: 600 !important;\n color: white !important;\n background: var(--primary) !important;\n border: 1.5px solid var(--primary) !important;\n border-radius: 8px !important;\n cursor: pointer !important;\n transition: background 0.2s ease, border-color 0.2s ease !important;\n height: 54px !important;\n box-sizing: border-box !important;\n }\n\n .submit-btn:hover:not(:disabled) {\n background: var(--primary-hover) !important;\n border-color: var(--primary-hover) !important;\n }\n\n .submit-btn:disabled {\n background: var(--gray-300) !important;\n border-color: var(--gray-300) !important;\n color: var(--gray-500) !important;\n cursor: not-allowed !important;\n }\n\n .submit-btn .spinner {\n width: 20px !important;\n height: 20px !important;\n border: 2px solid rgba(255,255,255,0.3) !important;\n border-top-color: white !important;\n border-radius: 50% !important;\n animation: spin 0.8s linear infinite !important;\n flex-shrink: 0 !important;\n }\n\n \/* Hidden contract date field *\/\n .hidden-field {\n display: none;\n animation: slideDown 0.3s ease;\n }\n\n .hidden-field.visible {\n display: block;\n }\n\n @keyframes slideDown {\n from { opacity: 0; max-height: 0; }\n to { opacity: 1; max-height: 100px; }\n }\n\n \/* Success message *\/\n .success-message {\n display: none;\n text-align: center;\n padding: 3rem 2rem;\n }\n\n .success-message.visible {\n display: block;\n }\n\n .success-message svg {\n width: 64px;\n height: 64px;\n color: var(--primary);\n margin-bottom: 1rem;\n }\n\n .success-message h2 {\n color: var(--gray-800);\n margin-bottom: 0.5rem;\n }\n\n .success-message p {\n color: var(--gray-600);\n }\n\n \/* Debug info (hidden in production) *\/\n .debug-info {\n margin-top: 1rem;\n padding: 0.75rem;\n background: var(--gray-100);\n border-radius: 6px;\n font-size: 0.75rem;\n color: var(--gray-500);\n font-family: monospace;\n display: none;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"form-container\">\n <div class=\"form-header\">\n <h1>Zakelijk Energieformulier<\/h1>\n <\/div>\n\n <div class=\"form-body\">\n <form id=\"energieForm\">\n \n \n <div class=\"form-section\" id=\"bedrijfsSection\">\n <h2 class=\"section-title\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" \/>\n <\/svg>\n Bedrijfsgegevens\n <\/h2>\n\n \n <div class=\"form-group\">\n <label for=\"bedrijfZoeken\">Zoek uw bedrijf<\/label>\n <div class=\"search-container\">\n <div class=\"search-input-wrapper\">\n <input type=\"text\" id=\"bedrijfZoeken\" placeholder=\"Typ bedrijfsnaam of KvK-nummer...\" autocomplete=\"off\">\n <svg class=\"search-icon\" id=\"searchIcon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/>\n <\/svg>\n <div class=\"search-spinner\" id=\"searchSpinner\" style=\"display: none;\"><\/div>\n <\/div>\n <div class=\"search-results\" id=\"searchResults\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"selected-company\" id=\"selectedCompany\">\n <div class=\"selected-company-header\">\n <span class=\"selected-company-label\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 13l4 4L19 7\" \/>\n <\/svg>\n Geselecteerd bedrijf\n <\/span>\n <button type=\"button\" class=\"selected-company-clear\" id=\"clearCompany\" title=\"Selectie wissen\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg>\n <\/button>\n <\/div>\n <div class=\"selected-company-name\" id=\"selectedCompanyName\"><\/div>\n <div class=\"selected-company-details\" id=\"selectedCompanyAddress\"><\/div>\n <div class=\"selected-company-kvk\" id=\"selectedCompanyKvk\"><\/div>\n <\/div>\n\n \n <button type=\"button\" class=\"manual-entry-toggle\" id=\"manualEntryToggle\">\n <span>Bedrijf niet gevonden? Vul handmatig in<\/span>\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \/>\n <\/svg>\n <\/button>\n\n \n <div class=\"manual-entry-section\" id=\"manualEntrySection\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"bedrijfsnaamHandmatig\">Bedrijfsnaam<\/label>\n <input type=\"text\" id=\"bedrijfsnaamHandmatig\" placeholder=\"Uw bedrijfsnaam\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"kvkNummerHandmatig\">KvK-nummer (optioneel)<\/label>\n <input type=\"text\" id=\"kvkNummerHandmatig\" placeholder=\"12345678\" maxlength=\"8\">\n <\/div>\n <\/div>\n <button type=\"button\" class=\"manual-entry-confirm\" id=\"manualEntryConfirm\">Bevestig bedrijfsgegevens<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\">\n <h2 class=\"section-title\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n <\/svg>\n Adresgegevens\n <\/h2>\n\n \n <div class=\"address-incomplete-notice\" id=\"addressIncompleteNotice\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" \/>\n <\/svg>\n <span>Niet alle adresgegevens konden worden opgehaald. Vul de ontbrekende velden handmatig in.<\/span>\n <\/div>\n\n <div id=\"statusIndicator\" class=\"status-indicator\">\n <span id=\"statusIcon\"><\/span>\n <span id=\"statusText\"><\/span>\n <\/div>\n\n <div class=\"form-row four-cols-address\">\n <div class=\"form-group\">\n <label for=\"postcode\">Postcode <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"postcode\" name=\"postcode\" placeholder=\"1234AB\" maxlength=\"7\" required>\n <div class=\"error-message\" id=\"postcodeError\">Voer een geldige postcode in (bijv. 1234AB)<\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"huisnummer\">Huisnummer <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"huisnummer\" name=\"huisnummer\" placeholder=\"123\" required>\n <div class=\"error-message\" id=\"huisnummerError\">Voer een geldig huisnummer in<\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"toevoeging\">Toevoeging<\/label>\n <input type=\"text\" id=\"toevoeging\" name=\"toevoeging\" placeholder=\"A, bis, etc.\">\n <\/div>\n <div class=\"form-group check-button-group\">\n <label> <\/label>\n <button type=\"button\" class=\"check-address-btn\" id=\"checkAddressBtn\" disabled>\n <span class=\"check-btn-text\">Controleer gegevens<\/span>\n <span class=\"check-btn-spinner\"><\/span>\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"straat\">Straat<\/label>\n <input type=\"text\" id=\"straat\" name=\"straat\" placeholder=\"Wordt automatisch ingevuld of vul handmatig in\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"plaats\">Plaats<\/label>\n <input type=\"text\" id=\"plaats\" name=\"plaats\" placeholder=\"Wordt automatisch ingevuld of vul handmatig in\">\n <\/div>\n <\/div>\n\n <div class=\"debug-info\" id=\"debugInfo\"><\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"contactSection\">\n <h2 class=\"section-title\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\" \/>\n <\/svg>\n Contactgegevens\n <\/h2>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"voornaam\">Voornaam <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"voornaam\" name=\"voornaam\" placeholder=\"Jan\" required>\n <div class=\"error-message\" id=\"voornaamError\">Voer uw voornaam in<\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"achternaam\">Achternaam <span class=\"required\">*<\/span><\/label>\n <input type=\"text\" id=\"achternaam\" name=\"achternaam\" placeholder=\"Jansen\" required>\n <div class=\"error-message\" id=\"achternaamError\">Voer uw achternaam in<\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"telefoon\">Telefoon <span class=\"required\">*<\/span><\/label>\n <input type=\"tel\" id=\"telefoon\" name=\"telefoon\" placeholder=\"0612345678\" required>\n <div class=\"error-message\" id=\"telefoonError\">Voer een geldig telefoonnummer in (min. 10 cijfers)<\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">E-mail <span class=\"required\">*<\/span><\/label>\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"jan@voorbeeld.nl\" required>\n <div class=\"error-message\" id=\"emailError\">Voer een geldig e-mailadres in<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"contractSection\">\n <h2 class=\"section-title\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" \/>\n <\/svg>\n Contract Informatie\n <\/h2>\n\n <div class=\"form-group\">\n <label for=\"leverancier\">Huidige energieleverancier<\/label>\n <select id=\"leverancier\" name=\"leverancier\">\n <option value=\"\">Selecteer uw leverancier<\/option>\n <option value=\"Anders\">Anders<\/option>\n <option value=\"Budget Energie\">Budget Energie<\/option>\n <option value=\"Delta\">Delta<\/option>\n <option value=\"Energiedirect\">Energiedirect<\/option>\n <option value=\"Energyhouse\">Energyhouse<\/option>\n <option value=\"ENGIE\">ENGIE<\/option>\n <option value=\"Eneco\">Eneco<\/option>\n <option value=\"Essent\">Essent<\/option>\n <option value=\"Frank Energie\">Frank Energie<\/option>\n <option value=\"Greenchoice\">Greenchoice<\/option>\n <option value=\"Groenpand Energie\">Groenpand Energie<\/option>\n <option value=\"Gulf Gas and Power\">Gulf Gas and Power<\/option>\n <option value=\"MAINEnergie\">MAINEnergie<\/option>\n <option value=\"NextEnergy\">NextEnergy<\/option>\n <option value=\"NLE\">NLE<\/option>\n <option value=\"OM Energie\">OM Energie<\/option>\n <option value=\"Oxxio\">Oxxio<\/option>\n <option value=\"Powerpeers\">Powerpeers<\/option>\n <option value=\"Pure Energie\">Pure Energie<\/option>\n <option value=\"SamSam Energie\">SamSam Energie<\/option>\n <option value=\"Scholt Energy\">Scholt Energy<\/option>\n <option value=\"SEFE Energy\">SEFE Energy<\/option>\n <option value=\"Van Helder\">Van Helder<\/option>\n <option value=\"Vandebron\">Vandebron<\/option>\n <option value=\"Vattenfall\">Vattenfall<\/option>\n <option value=\"Vrijopnaam\">Vrijopnaam<\/option>\n <option value=\"Welkom Energie\">Welkom Energie<\/option>\n <option value=\"Woonenergie\">Woonenergie<\/option>\n <option value=\"Zonnig\">Zonnig<\/option>\n <\/select>\n <\/div>\n\n <div class=\"form-group\">\n <label>Contract type<\/label>\n <div class=\"radio-group\">\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"contractType\" value=\"Vast\">\n <span>Vast<\/span>\n <\/label>\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"contractType\" value=\"Variabel\">\n <span>Variabel<\/span>\n <\/label>\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"contractType\" value=\"Dynamisch\">\n <span>Dynamisch<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n <div class=\"form-group hidden-field\" id=\"vastTotContainer\">\n <label for=\"vastTot\">Vast tot<\/label>\n <input type=\"date\" id=\"vastTot\" name=\"vastTot\">\n <\/div>\n <\/div>\n\n \n <div class=\"form-section\" id=\"verbruikSection\">\n <h2 class=\"section-title\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\" \/>\n <\/svg>\n Verbruiksgegevens\n <\/h2>\n\n \n <div class=\"form-group\">\n <label>Meter type<\/label>\n <div class=\"radio-group\">\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"meterType\" value=\"Enkeltarief\" checked>\n <span>Enkeltarief<\/span>\n <\/label>\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"meterType\" value=\"Dubbeltarief\">\n <span>Dubbeltarief (piek\/dal)<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"form-group\" id=\"enkeltariefContainer\">\n <label for=\"elektraVerbruik\">Elektra verbruik (kWh\/jaar)<\/label>\n <input type=\"number\" id=\"elektraVerbruik\" name=\"elektraVerbruik\" placeholder=\"3500\">\n <\/div>\n\n \n <div class=\"form-row hidden-field\" id=\"dubbeltariefContainer\">\n <div class=\"form-group\">\n <label for=\"elektraPiek\">Elektra piek (kWh\/jaar)<\/label>\n <input type=\"number\" id=\"elektraPiek\" name=\"elektraPiek\" placeholder=\"2000\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"elektraDal\">Elektra dal (kWh\/jaar)<\/label>\n <input type=\"number\" id=\"elektraDal\" name=\"elektraDal\" placeholder=\"1500\">\n <\/div>\n <\/div>\n\n \n <div class=\"form-group\">\n <label>Levert u terug aan het net? (zonnepanelen)<\/label>\n <div class=\"radio-group\">\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"teruglevering\" value=\"Nee\" checked>\n <span>Nee<\/span>\n <\/label>\n <label class=\"radio-option\">\n <input type=\"radio\" name=\"teruglevering\" value=\"Ja\">\n <span>Ja<\/span>\n <\/label>\n <\/div>\n <\/div>\n\n \n <div class=\"form-group hidden-field\" id=\"terugleveringContainer\">\n <label for=\"terugleveringKwh\">Teruglevering (kWh\/jaar)<\/label>\n <input type=\"number\" id=\"terugleveringKwh\" name=\"terugleveringKwh\" placeholder=\"800\">\n <\/div>\n\n \n <div class=\"form-group\">\n <label for=\"gasVerbruik\">Gas verbruik (m\u00b3\/jaar)<\/label>\n <input type=\"number\" id=\"gasVerbruik\" name=\"gasVerbruik\" placeholder=\"1500\">\n <\/div>\n\n \n <div class=\"form-group\">\n <label>Upload jaarnota (optioneel)<\/label>\n <div class=\"file-upload\">\n <label class=\"file-upload-label\" for=\"jaarnota\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12\" \/>\n <\/svg>\n <span>Klik of sleep uw jaarnota hier<\/span>\n <span style=\"font-size: 0.75rem; color: var(--gray-400);\">PDF, JPG of PNG (max. 5MB)<\/span>\n <\/label>\n <input type=\"file\" id=\"jaarnota\" name=\"jaarnota\" accept=\".pdf,.jpg,.jpeg,.png\">\n <\/div>\n <div class=\"file-name\" id=\"fileName\"><\/div>\n <\/div>\n <\/div>\n\n \n <input type=\"hidden\" id=\"bedrijfsnaam\" name=\"bedrijfsnaam\" value=\"\">\n <input type=\"hidden\" id=\"kvkNummer\" name=\"kvkNummer\" value=\"\">\n <input type=\"hidden\" id=\"pandType\" name=\"pandType\" value=\"\">\n <input type=\"hidden\" id=\"gebruiksdoelen\" name=\"gebruiksdoelen\" value=\"\">\n <input type=\"hidden\" id=\"adresseerbaarObjectId\" name=\"adresseerbaarObjectId\" value=\"\">\n\n \n <div class=\"form-section\">\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n <span id=\"submitText\">Verstuur aanvraag<\/span>\n <\/button>\n <\/div>\n <\/form>\n\n \n <div class=\"success-message\" id=\"successMessage\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/>\n <\/svg>\n <h2>Bedankt voor uw aanvraag!<\/h2>\n <p>Wij nemen zo snel mogelijk contact met u op.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ============================================\n \/\/ CONFIGURATIE\n \/\/ ============================================\n const CONFIG = {\n WEB3FORMS_KEY: '87b88510-cc61-414a-875a-831a54de9828',\n ADMIN_EMAIL: 'info@gemakelijkeenergie.nl',\n PARTICULIER_REDIRECT: '\/particulier\/',\n REDIRECT_DELAY: 3000,\n DEBUG: false \/\/ Zet op true voor debug info\n };\n\n \/\/ ============================================\n \/\/ API ENDPOINTS\n \/\/ ============================================\n const API = {\n PDOK_LOCATIESERVER: 'https:\/\/api.pdok.nl\/bzk\/locatieserver\/search\/v3_1\/free',\n BAG_WFS: 'https:\/\/service.pdok.nl\/lv\/bag\/wfs\/v2_0',\n KVK_ZOEKEN: 'https:\/\/api.kvk.nl\/api\/v2\/zoeken',\n \/\/ KVK Proxy - PAS DIT AAN NAAR JOUW DOMEIN!\n KVK_PROXY: '\/kvk-proxy.php'\n };\n\n \/\/ ============================================\n \/\/ GEBRUIKSDOEL CLASSIFICATIE\n \/\/ ============================================\n const WOONFUNCTIE = 'woonfunctie';\n const ZAKELIJKE_FUNCTIES = [\n 'kantoorfunctie',\n 'winkelfunctie',\n 'gezondheidszorgfunctie',\n 'bijeenkomstfunctie',\n 'industriefunctie',\n 'logiesfunctie',\n 'onderwijsfunctie',\n 'overige gebruiksfunctie',\n 'sportfunctie',\n 'celfunctie'\n ];\n\n \/\/ ============================================\n \/\/ STATE MANAGEMENT\n \/\/ ============================================\n let formState = {\n isValidating: false,\n isSubmitting: false,\n isSearching: false,\n pandType: '',\n gebruiksdoelen: [],\n adresData: null,\n selectedCompany: null,\n \/\/ KVK zoeken paginering\n currentSearchQuery: '',\n currentPage: 1,\n totalResults: 0,\n loadedResults: []\n };\n\n \/\/ ============================================\n \/\/ DOM ELEMENTS\n \/\/ ============================================\n const elements = {\n form: document.getElementById('energieForm'),\n postcode: document.getElementById('postcode'),\n huisnummer: document.getElementById('huisnummer'),\n straat: document.getElementById('straat'),\n plaats: document.getElementById('plaats'),\n statusIndicator: document.getElementById('statusIndicator'),\n statusIcon: document.getElementById('statusIcon'),\n statusText: document.getElementById('statusText'),\n submitBtn: document.getElementById('submitBtn'),\n submitText: document.getElementById('submitText'),\n successMessage: document.getElementById('successMessage'),\n vastTotContainer: document.getElementById('vastTotContainer'),\n fileName: document.getElementById('fileName'),\n debugInfo: document.getElementById('debugInfo'),\n \/\/ Adres incomplete melding\n addressIncompleteNotice: document.getElementById('addressIncompleteNotice'),\n \/\/ Controleer gegevens knop\n checkAddressBtn: document.getElementById('checkAddressBtn'),\n \/\/ Bedrijfszoeker elements\n bedrijfZoeken: document.getElementById('bedrijfZoeken'),\n searchResults: document.getElementById('searchResults'),\n searchIcon: document.getElementById('searchIcon'),\n searchSpinner: document.getElementById('searchSpinner'),\n selectedCompany: document.getElementById('selectedCompany'),\n selectedCompanyName: document.getElementById('selectedCompanyName'),\n selectedCompanyAddress: document.getElementById('selectedCompanyAddress'),\n selectedCompanyKvk: document.getElementById('selectedCompanyKvk'),\n clearCompany: document.getElementById('clearCompany'),\n manualEntryToggle: document.getElementById('manualEntryToggle'),\n manualEntrySection: document.getElementById('manualEntrySection'),\n manualEntryConfirm: document.getElementById('manualEntryConfirm'),\n bedrijfsnaamHandmatig: document.getElementById('bedrijfsnaamHandmatig'),\n kvkNummerHandmatig: document.getElementById('kvkNummerHandmatig'),\n \/\/ Hidden fields\n bedrijfsnaamHidden: document.getElementById('bedrijfsnaam'),\n kvkNummerHidden: document.getElementById('kvkNummer')\n };\n\n \/\/ ============================================\n \/\/ UTILITY FUNCTIONS\n \/\/ ============================================\n \n function normalizePostcode(postcode) {\n return postcode.replace(\/\\s\/g, '').toUpperCase();\n }\n\n function isValidPostcode(postcode) {\n const normalized = normalizePostcode(postcode);\n return \/^[1-9][0-9]{3}[A-Z]{2}$\/.test(normalized);\n }\n\n function isValidHuisnummer(huisnummer) {\n return \/^\\d+[a-zA-Z]?(-?\\d+)?$\/.test(huisnummer.trim());\n }\n\n function extractHuisnummer(input) {\n const match = input.match(\/^(\\d+)\/);\n return match ? match[1] : input;\n }\n\n function debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }\n\n function showDebug(info) {\n if (CONFIG.DEBUG) {\n elements.debugInfo.style.display = 'block';\n elements.debugInfo.textContent = JSON.stringify(info, null, 2);\n console.log('[DEBUG]', info);\n }\n }\n\n \/\/ ============================================\n \/\/ KVK API ZOEKEN (via proxy)\n \/\/ ============================================\n\n async function searchKvK(query, loadMore = false) {\n if (!query || query.length < 3) {\n hideSearchResults();\n return;\n }\n\n \/\/ Bij nieuwe zoekopdracht, reset paginering\n if (!loadMore || query !== formState.currentSearchQuery) {\n formState.currentSearchQuery = query;\n formState.currentPage = 1;\n formState.loadedResults = [];\n formState.totalResults = 0;\n } else {\n \/\/ Laad volgende pagina\n formState.currentPage++;\n }\n\n formState.isSearching = true;\n showSearchSpinner(true);\n\n try {\n const params = new URLSearchParams({\n naam: query,\n pagina: formState.currentPage,\n resultatenPerPagina: 5\n });\n\n const url = `${API.KVK_PROXY}?${params}`;\n \n showDebug({ step: 'KVK Search via Proxy', url, query, page: formState.currentPage });\n\n const response = await fetch(url, {\n method: 'GET'\n });\n\n if (!response.ok) {\n throw new Error(`KVK Proxy error: ${response.status}`);\n }\n\n const data = await response.json();\n \n \/\/ Check voor proxy errors\n if (data.error) {\n throw new Error(data.error);\n }\n \n formState.totalResults = data.totaal || 0;\n \n showDebug({ step: 'KVK Response', totaal: data.totaal, resultaten: data.resultaten?.length, page: formState.currentPage });\n\n if (data.resultaten && data.resultaten.length > 0) {\n \/\/ Voeg nieuwe resultaten toe aan bestaande\n formState.loadedResults = [...formState.loadedResults, ...data.resultaten];\n displaySearchResults(formState.loadedResults, formState.totalResults);\n } else if (formState.loadedResults.length === 0) {\n displayNoResults();\n }\n\n } catch (error) {\n console.error('KVK search error:', error);\n showDebug({ step: 'KVK Error', error: error.message });\n if (formState.loadedResults.length === 0) {\n displaySearchError();\n }\n }\n\n formState.isSearching = false;\n showSearchSpinner(false);\n }\n\n function loadMoreResults() {\n if (formState.currentSearchQuery && !formState.isSearching) {\n searchKvK(formState.currentSearchQuery, true);\n }\n }\n\n function displaySearchResults(resultaten, totaal) {\n let html = '';\n \n resultaten.forEach((bedrijf, index) => {\n const naam = bedrijf.naam || 'Onbekend';\n const kvkNummer = bedrijf.kvkNummer || '';\n \n \/\/ Adres samenstellen\n let adres = '';\n if (bedrijf.adres) {\n const a = bedrijf.adres.binnenlandsAdres || bedrijf.adres.buitenlandsAdres || {};\n if (a.straatnaam) {\n adres = a.straatnaam;\n if (a.huisnummer) adres += ` ${a.huisnummer}`;\n if (a.huisletter) adres += `${a.huisletter}`;\n if (a.postcode) adres += `, ${a.postcode}`;\n if (a.plaats) adres += ` ${a.plaats}`;\n } else if (a.plaats) {\n adres = a.plaats;\n }\n }\n\n html += `\n <div class=\"search-result-item\" data-index=\"${index}\" data-bedrijf='${JSON.stringify(bedrijf).replace(\/'\/g, \"'\")}'>\n <div class=\"search-result-name\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\" \/>\n <\/svg>\n ${naam}\n <\/div>\n ${adres ? `<div class=\"search-result-address\">${adres}<\/div>` : ''}\n ${kvkNummer ? `<div class=\"search-result-kvk\">KvK: ${kvkNummer}<\/div>` : ''}\n <\/div>\n `;\n });\n\n \/\/ \"Laat meer zien\" knop als er meer resultaten zijn\n const remaining = totaal - resultaten.length;\n if (remaining > 0) {\n html += `\n <div class=\"search-load-more\" id=\"loadMoreBtn\">\n <button type=\"button\" onclick=\"loadMoreResults()\">\n Laat meer zien (${remaining} meer)\n <\/button>\n <\/div>\n `;\n }\n\n elements.searchResults.innerHTML = html;\n elements.searchResults.classList.add('visible');\n\n \/\/ Add click handlers\n document.querySelectorAll('.search-result-item').forEach(item => {\n item.addEventListener('click', function() {\n const bedrijf = JSON.parse(this.dataset.bedrijf);\n selectCompany(bedrijf);\n });\n });\n }\n\n function displayNoResults() {\n elements.searchResults.innerHTML = `\n <div class=\"search-no-results\">\n Geen bedrijven gevonden. Probeer een andere zoekterm of vul handmatig in.\n <\/div>\n `;\n elements.searchResults.classList.add('visible');\n }\n\n function displaySearchError() {\n elements.searchResults.innerHTML = `\n <div class=\"search-no-results\">\n Er is een fout opgetreden bij het zoeken. Probeer het opnieuw of vul handmatig in.\n <\/div>\n `;\n elements.searchResults.classList.add('visible');\n }\n\n function hideSearchResults() {\n elements.searchResults.classList.remove('visible');\n elements.searchResults.innerHTML = '';\n \/\/ Reset paginering state\n formState.currentPage = 1;\n formState.loadedResults = [];\n formState.totalResults = 0;\n }\n\n function showSearchSpinner(show) {\n elements.searchIcon.style.display = show ? 'none' : 'block';\n elements.searchSpinner.style.display = show ? 'block' : 'none';\n }\n\n \/\/ ============================================\n \/\/ BEDRIJF SELECTEREN\n \/\/ ============================================\n\n function selectCompany(bedrijf) {\n formState.selectedCompany = bedrijf;\n \n const naam = bedrijf.naam || '';\n const kvkNummer = bedrijf.kvkNummer || '';\n \n \/\/ Adres samenstellen\n let adres = '';\n let straat = '';\n let huisnummer = '';\n let huisletter = '';\n let postcode = '';\n let plaats = '';\n \n if (bedrijf.adres) {\n const a = bedrijf.adres.binnenlandsAdres || bedrijf.adres.buitenlandsAdres || {};\n straat = a.straatnaam || '';\n huisnummer = a.huisnummer ? String(a.huisnummer) : '';\n huisletter = a.huisletter || '';\n postcode = a.postcode || '';\n plaats = a.plaats || '';\n \n if (straat) {\n adres = straat;\n if (huisnummer) adres += ` ${huisnummer}`;\n if (huisletter) adres += `${huisletter}`;\n if (postcode) adres += `, ${postcode}`;\n if (plaats) adres += ` ${plaats}`;\n } else if (plaats) {\n adres = plaats;\n }\n }\n\n \/\/ Update UI\n elements.selectedCompanyName.textContent = naam;\n elements.selectedCompanyAddress.textContent = adres || 'Adres niet beschikbaar';\n elements.selectedCompanyKvk.textContent = kvkNummer ? `KvK: ${kvkNummer}` : '';\n elements.selectedCompany.classList.add('visible');\n \n \/\/ Hide search results and clear search input\n hideSearchResults();\n elements.bedrijfZoeken.value = '';\n \n \/\/ Hide manual entry section\n elements.manualEntrySection.classList.remove('visible');\n elements.manualEntryToggle.classList.remove('expanded');\n \n \/\/ Fill hidden fields\n elements.bedrijfsnaamHidden.value = naam;\n elements.kvkNummerHidden.value = kvkNummer;\n \n \/\/ Fill address fields if available\n if (postcode) {\n elements.postcode.value = postcode.replace(\/\\s\/g, '');\n }\n if (huisnummer) {\n elements.huisnummer.value = huisnummer;\n }\n if (huisletter) {\n document.getElementById('toevoeging').value = huisletter;\n }\n if (straat) {\n elements.straat.value = straat;\n }\n if (plaats) {\n elements.plaats.value = plaats;\n }\n \n \/\/ Check of alle verplichte adresvelden zijn ingevuld\n const missingFields = [];\n if (!postcode) missingFields.push('postcode');\n if (!huisnummer) missingFields.push('huisnummer');\n if (!straat) missingFields.push('straat');\n if (!plaats) missingFields.push('plaats');\n \n \/\/ Toon melding als er velden ontbreken\n if (missingFields.length > 0) {\n elements.addressIncompleteNotice.classList.add('visible');\n showDebug({ step: 'Address Incomplete', missingFields });\n } else {\n elements.addressIncompleteNotice.classList.remove('visible');\n }\n \n \/\/ Update knop status - gebruiker moet zelf klikken\n updateCheckButtonState();\n\n showDebug({ step: 'Company Selected', naam, kvkNummer, adres, missingFields });\n }\n\n function clearCompanySelection() {\n formState.selectedCompany = null;\n \n \/\/ Hide selected company card\n elements.selectedCompany.classList.remove('visible');\n \n \/\/ Hide address incomplete notice\n elements.addressIncompleteNotice.classList.remove('visible');\n \n \/\/ Clear hidden fields\n elements.bedrijfsnaamHidden.value = '';\n elements.kvkNummerHidden.value = '';\n \n \/\/ Clear manual entry fields\n elements.bedrijfsnaamHandmatig.value = '';\n elements.kvkNummerHandmatig.value = '';\n \n showDebug({ step: 'Company Selection Cleared' });\n }\n\n function confirmManualEntry() {\n const naam = elements.bedrijfsnaamHandmatig.value.trim();\n const kvkNummer = elements.kvkNummerHandmatig.value.trim();\n \n if (!naam) {\n alert('Vul een bedrijfsnaam in.');\n return;\n }\n \n \/\/ Create manual company object\n const bedrijf = {\n naam: naam,\n kvkNummer: kvkNummer,\n adres: null,\n isManual: true\n };\n \n formState.selectedCompany = bedrijf;\n \n \/\/ Update UI\n elements.selectedCompanyName.textContent = naam;\n elements.selectedCompanyAddress.textContent = 'Handmatig ingevoerd';\n elements.selectedCompanyKvk.textContent = kvkNummer ? `KvK: ${kvkNummer}` : '';\n elements.selectedCompany.classList.add('visible');\n \n \/\/ Fill hidden fields\n elements.bedrijfsnaamHidden.value = naam;\n elements.kvkNummerHidden.value = kvkNummer;\n \n \/\/ Hide manual entry section\n elements.manualEntrySection.classList.remove('visible');\n elements.manualEntryToggle.classList.remove('expanded');\n \n \/\/ Toon adres melding - gebruiker moet adres handmatig invullen\n elements.addressIncompleteNotice.classList.add('visible');\n \n showDebug({ step: 'Manual Entry Confirmed', naam, kvkNummer });\n }\n\n function toggleManualEntry() {\n const isVisible = elements.manualEntrySection.classList.contains('visible');\n \n if (isVisible) {\n elements.manualEntrySection.classList.remove('visible');\n elements.manualEntryToggle.classList.remove('expanded');\n } else {\n elements.manualEntrySection.classList.add('visible');\n elements.manualEntryToggle.classList.add('expanded');\n \/\/ Hide search results\n hideSearchResults();\n }\n }\n\n \/\/ ============================================\n \/\/ STATUS INDICATOR FUNCTIONS\n \/\/ ============================================\n\n function showStatus(type, message) {\n elements.statusIndicator.className = 'status-indicator visible ' + type;\n \n let iconHTML = '';\n switch(type) {\n case 'loading':\n iconHTML = '<div class=\"spinner\"><\/div>';\n break;\n case 'zakelijk':\n iconHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>';\n break;\n case 'particulier':\n iconHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z\" \/><\/svg>';\n break;\n case 'handmatig':\n iconHTML = '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" \/><\/svg>';\n break;\n }\n \n elements.statusIcon.innerHTML = iconHTML;\n elements.statusText.textContent = message;\n }\n\n function hideStatus() {\n elements.statusIndicator.className = 'status-indicator';\n }\n\n \/\/ ============================================\n \/\/ PDOK LOCATIESERVER API\n \/\/ ============================================\n\n async function lookupAddress(postcode, huisnummer, toevoeging = '') {\n const normalizedPostcode = normalizePostcode(postcode);\n const numHuisnummer = extractHuisnummer(huisnummer);\n \n let searchQuery = `${normalizedPostcode} ${numHuisnummer}`;\n if (toevoeging && toevoeging.trim()) {\n searchQuery += ` ${toevoeging.trim()}`;\n }\n \n const params = new URLSearchParams({\n q: searchQuery,\n fq: 'type:adres',\n fl: 'weergavenaam,straatnaam,woonplaatsnaam,postcode,huisnummer,huisletter,huisnummertoevoeging,adresseerbaarobject_id,nummeraanduiding_id,centroide_ll',\n rows: '10'\n });\n\n const url = `${API.PDOK_LOCATIESERVER}?${params}`;\n \n showDebug({ step: 'PDOK Locatieserver', url, searchQuery });\n \n try {\n const response = await fetch(url);\n if (!response.ok) throw new Error('Network response was not ok');\n \n const data = await response.json();\n \n showDebug({ step: 'PDOK Response', numFound: data.response?.numFound, docs: data.response?.docs?.length });\n \n if (data.response && data.response.docs && data.response.docs.length > 0) {\n const exactMatch = data.response.docs.find(doc => {\n const postcodeMatch = doc.postcode === normalizedPostcode;\n const huisnummerMatch = String(doc.huisnummer) === numHuisnummer;\n \n if (toevoeging && toevoeging.trim()) {\n const toevoegingNorm = toevoeging.trim().toLowerCase();\n const huisletterMatch = doc.huisletter && doc.huisletter.toLowerCase() === toevoegingNorm;\n const toevoegingMatch = doc.huisnummertoevoeging && doc.huisnummertoevoeging.toLowerCase() === toevoegingNorm;\n return postcodeMatch && huisnummerMatch && (huisletterMatch || toevoegingMatch);\n }\n \n return postcodeMatch && huisnummerMatch;\n });\n \n return exactMatch || data.response.docs[0];\n }\n \n return null;\n } catch (error) {\n console.error('PDOK Locatieserver error:', error);\n return null;\n }\n }\n\n \/\/ ============================================\n \/\/ BAG WFS API\n \/\/ ============================================\n\n async function getVerblijfsobjectByIdentificatie(identificatie) {\n const xmlFilter = `<Filter><PropertyIsEqualTo><PropertyName>identificatie<\/PropertyName><Literal>${identificatie}<\/Literal><\/PropertyIsEqualTo><\/Filter>`;\n \n const params = new URLSearchParams({\n service: 'WFS',\n version: '2.0.0',\n request: 'GetFeature',\n typeName: 'bag:verblijfsobject',\n outputFormat: 'application\/json',\n FILTER: xmlFilter\n });\n\n const url = `${API.BAG_WFS}?${params}`;\n \n showDebug({ step: 'BAG WFS Request', url, identificatie, filter: xmlFilter });\n \n try {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`WFS request failed: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n \n showDebug({ \n step: 'BAG WFS Response', \n totalFeatures: data.totalFeatures,\n featuresReturned: data.features?.length \n });\n \n return data;\n } catch (error) {\n console.error('BAG WFS error:', error);\n showDebug({ step: 'BAG WFS Error', error: error.message });\n return null;\n }\n }\n\n \/\/ ============================================\n \/\/ PAND TYPE ANALYSE\n \/\/ ============================================\n\n function analyzeGebruiksdoelen(gebruiksdoelen) {\n if (!gebruiksdoelen || gebruiksdoelen.length === 0) {\n return { type: 'handmatig', reason: 'Geen gebruiksdoelen gevonden' };\n }\n\n const allDoelen = gebruiksdoelen.flat().map(d => d.toLowerCase().trim());\n \n const woonCount = allDoelen.filter(d => d === WOONFUNCTIE).length;\n const zakelijkCount = allDoelen.filter(d => ZAKELIJKE_FUNCTIES.includes(d)).length;\n const totalCount = allDoelen.length;\n\n showDebug({\n step: 'Analyse gebruiksdoelen',\n allDoelen,\n woonCount,\n zakelijkCount,\n totalCount\n });\n\n if (totalCount === 1) {\n if (allDoelen[0] === WOONFUNCTIE) {\n return { type: 'particulier', reason: 'Enkel verblijfsobject met woonfunctie' };\n } else if (ZAKELIJKE_FUNCTIES.includes(allDoelen[0])) {\n return { type: 'zakelijk', reason: `Enkel verblijfsobject met ${allDoelen[0]}` };\n }\n }\n\n const woonPercentage = (woonCount \/ totalCount) * 100;\n const zakelijkPercentage = (zakelijkCount \/ totalCount) * 100;\n\n if (woonPercentage >= 90) {\n return { type: 'particulier', reason: `>90% woonfunctie (${woonPercentage.toFixed(0)}%)` };\n } else if (zakelijkPercentage >= 90) {\n return { type: 'zakelijk', reason: `>90% zakelijk (${zakelijkPercentage.toFixed(0)}%)` };\n }\n\n return { \n type: 'handmatig', \n reason: `Gemengd gebruik: ${woonPercentage.toFixed(0)}% woon, ${zakelijkPercentage.toFixed(0)}% zakelijk` \n };\n }\n\n \/\/ ============================================\n \/\/ HOOFDVALIDATIE FUNCTIE\n \/\/ ============================================\n\n async function validateAddress() {\n const postcode = elements.postcode.value.trim();\n const huisnummer = elements.huisnummer.value.trim();\n const toevoeging = document.getElementById('toevoeging')?.value?.trim() || '';\n\n formState.pandType = '';\n formState.gebruiksdoelen = [];\n formState.adresData = null;\n document.getElementById('pandType').value = '';\n document.getElementById('gebruiksdoelen').value = '';\n\n if (!isValidPostcode(postcode)) {\n hideStatus();\n return;\n }\n\n if (!isValidHuisnummer(huisnummer)) {\n hideStatus();\n return;\n }\n\n \/\/ Start validatie - zet knop op loading\n formState.isValidating = true;\n setCheckButtonLoading(true);\n showStatus('loading', 'Adresgegevens controleren...');\n elements.submitBtn.disabled = true;\n\n try {\n showDebug({ step: '1. Start PDOK Locatieserver lookup', toevoeging });\n const adresData = await lookupAddress(postcode, huisnummer, toevoeging);\n \n if (!adresData) {\n showStatus('handmatig', 'Adres niet gevonden - vul straat en plaats handmatig in');\n formState.pandType = 'handmatig';\n document.getElementById('pandType').value = 'Onbekend';\n elements.submitBtn.disabled = false;\n formState.isValidating = false;\n setCheckButtonLoading(false);\n return;\n }\n\n if (!elements.straat.value) {\n elements.straat.value = adresData.straatnaam || '';\n }\n if (!elements.plaats.value) {\n elements.plaats.value = adresData.woonplaatsnaam || '';\n }\n formState.adresData = adresData;\n document.getElementById('adresseerbaarObjectId').value = adresData.adresseerbaarobject_id || '';\n\n showDebug({ step: '2. Start BAG WFS lookup', adresseerbaarobject_id: adresData.adresseerbaarobject_id });\n \n let gebruiksdoelen = [];\n \n if (adresData.adresseerbaarobject_id) {\n const wfsResult = await getVerblijfsobjectByIdentificatie(adresData.adresseerbaarobject_id);\n \n if (wfsResult && wfsResult.features && wfsResult.features.length > 0) {\n wfsResult.features.forEach(feature => {\n const props = feature.properties || {};\n const doel = props.gebruiksdoel;\n \n if (doel) {\n if (typeof doel === 'string') {\n gebruiksdoelen.push(...doel.split(',').map(d => d.trim()));\n } else if (Array.isArray(doel)) {\n gebruiksdoelen.push(...doel);\n } else {\n gebruiksdoelen.push(doel);\n }\n }\n });\n \n gebruiksdoelen = [...new Set(gebruiksdoelen)].filter(d => d);\n \n showDebug({ \n step: 'Gebruiksdoelen extracted', \n count: wfsResult.features.length,\n gebruiksdoelen \n });\n }\n } else {\n showDebug({ step: 'Geen adresseerbaarobject_id gevonden in locatieserver response' });\n }\n\n if (gebruiksdoelen.length === 0) {\n showStatus('handmatig', 'Pand type niet automatisch bepaald - we controleren uw specifieke unit handmatig');\n formState.pandType = 'handmatig';\n document.getElementById('pandType').value = 'Onbekend (handmatige controle)';\n document.getElementById('gebruiksdoelen').value = 'Niet beschikbaar';\n elements.submitBtn.disabled = false;\n formState.isValidating = false;\n setCheckButtonLoading(false);\n return;\n }\n\n formState.gebruiksdoelen = gebruiksdoelen;\n document.getElementById('gebruiksdoelen').value = gebruiksdoelen.join(', ');\n \n const analysis = analyzeGebruiksdoelen(gebruiksdoelen);\n formState.pandType = analysis.type;\n document.getElementById('pandType').value = analysis.type === 'zakelijk' ? 'Zakelijk' : \n analysis.type === 'particulier' ? 'Woonfunctie (particulier)' : \n 'Onbekend (handmatige controle)';\n\n showDebug({ step: 'Final analysis', analysis });\n\n switch (analysis.type) {\n case 'zakelijk':\n showStatus('zakelijk', 'Goed nieuws! U komt in aanmerking voor een voorstel');\n elements.submitBtn.disabled = false;\n break;\n \n case 'particulier':\n showStatus('handmatig', 'Dit lijkt een woonfunctie te zijn. U kunt gerust het formulier verder invullen, wij zullen de controle voor u uitvoeren.');\n document.getElementById('pandType').value = 'Woonfunctie (handmatige controle vereist)';\n elements.submitBtn.disabled = false;\n break;\n \n case 'handmatig':\n default:\n showStatus('handmatig', 'We controleren uw specifieke unit handmatig');\n elements.submitBtn.disabled = false;\n break;\n }\n\n } catch (error) {\n console.error('Validation error:', error);\n showDebug({ step: 'Error', error: error.message });\n showStatus('handmatig', 'Er is een fout opgetreden - handmatige controle vereist');\n formState.pandType = 'handmatig';\n elements.submitBtn.disabled = false;\n }\n\n formState.isValidating = false;\n setCheckButtonLoading(false);\n }\n\n \/\/ ============================================\n \/\/ FORM VALIDATION\n \/\/ ============================================\n\n function validateField(field, validationFn, errorElement) {\n const isValid = validationFn(field.value);\n \n if (!isValid && field.value.trim() !== '') {\n field.classList.add('error');\n field.classList.remove('valid');\n errorElement.classList.add('visible');\n } else if (isValid) {\n field.classList.remove('error');\n field.classList.add('valid');\n errorElement.classList.remove('visible');\n } else {\n field.classList.remove('error', 'valid');\n errorElement.classList.remove('visible');\n }\n \n return isValid;\n }\n\n function validateEmail(email) {\n return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email);\n }\n\n function validatePhone(phone) {\n const cleaned = phone.replace(\/\\D\/g, '');\n return cleaned.length >= 10;\n }\n\n function validateRequired(value) {\n return value.trim().length > 0;\n }\n\n \/\/ ============================================\n \/\/ FORM SUBMISSION\n \/\/ ============================================\n\n async function submitForm(event) {\n event.preventDefault();\n \n if (formState.isSubmitting || formState.isValidating) return;\n \n let isValid = true;\n \n isValid = validateField(elements.postcode, isValidPostcode, document.getElementById('postcodeError')) && isValid;\n isValid = validateField(document.getElementById('huisnummer'), isValidHuisnummer, document.getElementById('huisnummerError')) && isValid;\n isValid = validateField(document.getElementById('voornaam'), validateRequired, document.getElementById('voornaamError')) && isValid;\n isValid = validateField(document.getElementById('achternaam'), validateRequired, document.getElementById('achternaamError')) && isValid;\n isValid = validateField(document.getElementById('telefoon'), validatePhone, document.getElementById('telefoonError')) && isValid;\n isValid = validateField(document.getElementById('email'), validateEmail, document.getElementById('emailError')) && isValid;\n \n if (!isValid) {\n const firstError = document.querySelector('.error');\n if (firstError) {\n firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n return;\n }\n \n formState.isSubmitting = true;\n elements.submitBtn.disabled = true;\n elements.submitText.innerHTML = '<div class=\"spinner\"><\/div> Versturen...';\n\n try {\n const formData = new FormData(elements.form);\n const emailContent = buildEmailContent(formData);\n \n formData.append('access_key', CONFIG.WEB3FORMS_KEY);\n formData.append('subject', 'Nieuwe Zakelijke Energie Aanvraag');\n formData.append('from_name', 'Gemakkelijke Energie Website');\n formData.append('message', emailContent);\n \n const fileInput = document.getElementById('jaarnota');\n if (fileInput.files.length > 0) {\n const file = fileInput.files[0];\n const base64 = await fileToBase64(file);\n formData.append('attachment_name', file.name);\n formData.append('attachment', base64);\n }\n\n const response = await fetch('https:\/\/api.web3forms.com\/submit', {\n method: 'POST',\n body: formData\n });\n\n const result = await response.json();\n\n if (result.success) {\n elements.form.style.display = 'none';\n elements.successMessage.classList.add('visible');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n } else {\n throw new Error(result.message || 'Submission failed');\n }\n\n } catch (error) {\n console.error('Submission error:', error);\n alert('Er is een fout opgetreden bij het versturen. Probeer het opnieuw.');\n elements.submitBtn.disabled = false;\n elements.submitText.textContent = 'Verstuur aanvraag';\n }\n\n formState.isSubmitting = false;\n }\n\n function buildEmailContent(formData) {\n const contractType = formData.get('contractType');\n const vastTot = formData.get('vastTot');\n const toevoeging = formData.get('toevoeging');\n \n let huisnummerVolledig = formData.get('huisnummer');\n if (toevoeging) {\n huisnummerVolledig += ` ${toevoeging}`;\n }\n \n function formatDate(dateString) {\n if (!dateString) return '';\n const date = new Date(dateString);\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n return `${day}-${month}-${year}`;\n }\n \n let content = `\nBEDRIJFSGEGEVENS\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\nBedrijfsnaam: ${formData.get('bedrijfsnaam') || 'Niet opgegeven'}\nKvK-nummer: ${formData.get('kvkNummer') || 'Niet opgegeven'}\n\nADRESGEGEVENS\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\nPostcode: ${formData.get('postcode')}\nHuisnummer: ${huisnummerVolledig}\nStraat: ${formData.get('straat') || 'N\/A'}\nPlaats: ${formData.get('plaats') || 'N\/A'}\nType pand: ${formData.get('pandType') || 'Onbekend'}\nGebruiksdoelen: ${formData.get('gebruiksdoelen') || 'N\/A'}\n\nCONTACTGEGEVENS\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\nNaam: ${formData.get('voornaam')} ${formData.get('achternaam')}\nTelefoon: ${formData.get('telefoon')}\nE-mail: ${formData.get('email')}\n\nCONTRACT INFORMATIE\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\nHuidige leverancier: ${formData.get('leverancier') || 'Niet opgegeven'}\nContract type: ${contractType || 'Niet opgegeven'}`;\n\n if (contractType === 'Vast' && vastTot) {\n content += `\\nVast tot: ${formatDate(vastTot)}`;\n }\n\n content += `\n\nVERBRUIK\n\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\nMeter type: ${formData.get('meterType') || 'Niet opgegeven'}`;\n\n \/\/ Elektra verbruik afhankelijk van meter type\n const meterType = formData.get('meterType');\n if (meterType === 'Dubbeltarief') {\n content += `\nElektra piek: ${formData.get('elektraPiek') || 'Niet opgegeven'} kWh\/jaar\nElektra dal: ${formData.get('elektraDal') || 'Niet opgegeven'} kWh\/jaar`;\n } else {\n content += `\nElektra: ${formData.get('elektraVerbruik') || 'Niet opgegeven'} kWh\/jaar`;\n }\n\n \/\/ Teruglevering\n const teruglevering = formData.get('teruglevering');\n if (teruglevering === 'Ja') {\n content += `\nTeruglevering: Ja, ${formData.get('terugleveringKwh') || 'Niet opgegeven'} kWh\/jaar`;\n } else {\n content += `\nTeruglevering: Nee`;\n }\n\n content += `\nGas: ${formData.get('gasVerbruik') || 'Niet opgegeven'} m\u00b3\/jaar`;\n\n const fileInput = document.getElementById('jaarnota');\n if (fileInput.files.length > 0) {\n content += `\\n\\nJaarnota bijgevoegd: ${fileInput.files[0].name}`;\n }\n\n return content;\n }\n\n function fileToBase64(file) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result.split(',')[1]);\n reader.onerror = error => reject(error);\n });\n }\n\n \/\/ ============================================\n \/\/ EVENT LISTENERS\n \/\/ ============================================\n\n \/\/ KVK Bedrijfszoeker\n const debouncedSearch = debounce(searchKvK, 400);\n \n elements.bedrijfZoeken.addEventListener('input', function() {\n const query = this.value.trim();\n if (query.length >= 3) {\n debouncedSearch(query);\n } else {\n hideSearchResults();\n }\n });\n\n elements.bedrijfZoeken.addEventListener('focus', function() {\n if (this.value.trim().length >= 3 && elements.searchResults.innerHTML) {\n elements.searchResults.classList.add('visible');\n }\n });\n\n \/\/ Close search results when clicking outside\n document.addEventListener('click', function(e) {\n if (!e.target.closest('.search-container')) {\n hideSearchResults();\n }\n });\n\n elements.clearCompany.addEventListener('click', clearCompanySelection);\n elements.manualEntryToggle.addEventListener('click', toggleManualEntry);\n elements.manualEntryConfirm.addEventListener('click', confirmManualEntry);\n\n \/\/ KvK nummer handmatig - alleen cijfers\n elements.kvkNummerHandmatig.addEventListener('input', function() {\n this.value = this.value.replace(\/\\D\/g, '').slice(0, 8);\n });\n\n \/\/ Meter type toggle (enkeltarief\/dubbeltarief)\n document.querySelectorAll('input[name=\"meterType\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const enkeltariefContainer = document.getElementById('enkeltariefContainer');\n const dubbeltariefContainer = document.getElementById('dubbeltariefContainer');\n \n if (this.value === 'Dubbeltarief') {\n enkeltariefContainer.style.display = 'none';\n dubbeltariefContainer.classList.add('visible');\n } else {\n enkeltariefContainer.style.display = 'block';\n dubbeltariefContainer.classList.remove('visible');\n }\n });\n });\n\n \/\/ Teruglevering toggle (ja\/nee)\n document.querySelectorAll('input[name=\"teruglevering\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n const terugleveringContainer = document.getElementById('terugleveringContainer');\n \n if (this.value === 'Ja') {\n terugleveringContainer.classList.add('visible');\n } else {\n terugleveringContainer.classList.remove('visible');\n }\n });\n });\n\n \/\/ ============================================\n \/\/ CONTROLEER GEGEVENS KNOP LOGICA\n \/\/ ============================================\n\n function updateCheckButtonState() {\n const postcodeValid = isValidPostcode(elements.postcode.value);\n const huisnummerFilled = elements.huisnummer.value.trim().length > 0;\n \n if (postcodeValid && huisnummerFilled && !formState.isValidating) {\n elements.checkAddressBtn.disabled = false;\n } else {\n elements.checkAddressBtn.disabled = true;\n }\n }\n\n function setCheckButtonLoading(loading) {\n if (loading) {\n elements.checkAddressBtn.classList.add('loading');\n elements.checkAddressBtn.disabled = true;\n } else {\n elements.checkAddressBtn.classList.remove('loading');\n updateCheckButtonState();\n }\n }\n\n \/\/ Functie om te checken of alle adresvelden zijn ingevuld\n function checkAddressFieldsComplete() {\n const postcode = elements.postcode.value.trim();\n const huisnummer = elements.huisnummer.value.trim();\n const straat = elements.straat.value.trim();\n const plaats = elements.plaats.value.trim();\n \n \/\/ Als alle verplichte velden zijn ingevuld, verberg de melding\n if (postcode && huisnummer && straat && plaats) {\n elements.addressIncompleteNotice.classList.remove('visible');\n }\n }\n\n \/\/ Click handler voor \"Controleer gegevens\" knop\n elements.checkAddressBtn.addEventListener('click', function() {\n if (!this.disabled && !formState.isValidating) {\n validateAddress();\n }\n });\n\n \/\/ Postcode input: uppercase en alleen geldige karakters\n elements.postcode.addEventListener('input', function() {\n this.value = this.value.toUpperCase().replace(\/[^0-9A-Z]\/g, '');\n updateCheckButtonState();\n checkAddressFieldsComplete();\n });\n\n \/\/ Huisnummer input: update knop status\n elements.huisnummer.addEventListener('input', function() {\n updateCheckButtonState();\n checkAddressFieldsComplete();\n });\n\n \/\/ Straat input: check of melding weg kan\n elements.straat.addEventListener('input', function() {\n checkAddressFieldsComplete();\n });\n\n \/\/ Plaats input: check of melding weg kan\n elements.plaats.addEventListener('input', function() {\n checkAddressFieldsComplete();\n });\n\n \/\/ Toevoeging input: check of melding weg kan\n document.getElementById('toevoeging').addEventListener('input', function() {\n checkAddressFieldsComplete();\n });\n\n \/\/ Contract type toggle\n document.querySelectorAll('input[name=\"contractType\"]').forEach(radio => {\n radio.addEventListener('change', function() {\n if (this.value === 'Vast') {\n elements.vastTotContainer.classList.add('visible');\n } else {\n elements.vastTotContainer.classList.remove('visible');\n }\n });\n });\n\n \/\/ File upload display\n document.getElementById('jaarnota').addEventListener('change', function() {\n if (this.files.length > 0) {\n elements.fileName.textContent = '\ud83d\udcce ' + this.files[0].name;\n } else {\n elements.fileName.textContent = '';\n }\n });\n\n \/\/ Form submission\n elements.form.addEventListener('submit', submitForm);\n\n \/\/ Input validation on blur\n document.getElementById('voornaam').addEventListener('blur', function() {\n validateField(this, validateRequired, document.getElementById('voornaamError'));\n });\n\n document.getElementById('achternaam').addEventListener('blur', function() {\n validateField(this, validateRequired, document.getElementById('achternaamError'));\n });\n\n document.getElementById('telefoon').addEventListener('blur', function() {\n validateField(this, validatePhone, document.getElementById('telefoonError'));\n });\n\n document.getElementById('email').addEventListener('blur', function() {\n validateField(this, validateEmail, document.getElementById('emailError'));\n });\n\n \/\/ ============================================\n \/\/ INITIALIZATION\n \/\/ ============================================\n\n document.getElementById('vastTot').min = new Date().toISOString().split('T')[0];\n\n console.log('\ud83d\udccc Energie Formulier v7 geladen');\n console.log('\ud83d\udd0d KVK Bedrijfszoeker actief');\n console.log('\ud83c\udfe0 PDOK Locatieserver + BAG WFS integratie actief');\n console.log('\u2705 \"Controleer gegevens\" knop actief');\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa7e75a e-con-full e-flex e-con e-child\" data-id=\"aa7e75a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e78fbf1 hero-title-primary-color solor-heading-animation solor-animation-heading-style-2 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"e78fbf1\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Waarom kiezen voor<span> ZakelijkVastePrijs.nl? <\/span><\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f75d28 elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"4f75d28\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":100,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li><strong>Vaste energietarieven <\/strong>\u00a0Geen verrassingen, u weet precies wat u betaalt<\/li>\n<li><strong>Speciaal voor MKB <\/strong>\u00a0Contracten afgestemd op zakelijke verbruiksprofielen<\/li>\n<li><strong>Onafhankelijk advies <\/strong>\u00a0Wij vergelijken alle grote energieleveranciers<\/li>\n<li><strong>Geen overstapkosten <\/strong>\u00a0Wij regelen de overstap kosteloos voor u<\/li>\n<li><strong>Persoonlijke begeleiding <\/strong>E\u00e9n vast aanspreekpunt tijdens het hele proces<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-57ff441 e-flex e-con-boxed e-con e-parent\" data-id=\"57ff441\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-53f1056 e-flex e-con-boxed e-con e-child\" data-id=\"53f1056\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06655a0 small-heading-style solor-heading-animation solor-animation-heading-none elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"06655a0\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp","ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">ZAKELIJK VASTE PRIJS<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5382240 solor-heading-animation solor-animation-heading-style-2 elementor-widget elementor-widget-heading\" data-id=\"5382240\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Veel gestelde vragen<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f263234 e-con-full e-flex e-con e-child\" data-id=\"f263234\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d213b7 elementor-widget elementor-widget-elementskit-accordion\" data-id=\"1d213b7\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"elementskit-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\n <div class=\"elementskit-accordion accoedion-primary\" id=\"accordion-6a0c56623d8dd\">\n\n \n <div class=\"elementskit-card active\">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-0-1d213b7\">\n <a href=\"#collapse-04f36a56a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-04f36a56a0c56623d8dd\" aria-expanded=\"true\" aria-controls=\"Collapse-04f36a56a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Wat is een zakelijk energiecontract met vaste prijs?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-04f36a56a0c56623d8dd\" class=\" show collapse\" aria-labelledby=\"primaryHeading-0-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Een zakelijk energiecontract met vaste prijs is een overeenkomst waarbij de prijs per kWh (elektriciteit) en per m\u00b3 (gas) voor de gehele looptijd vaststaat. Dit betekent dat u niet te maken krijgt met prijsschommelingen op de energiemarkt. De looptijd is meestal 1, 2 of 3 jaar. Dit type contract is ideaal voor bedrijven die zekerheid willen over hun energiekosten en hun budget nauwkeurig willen plannen.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-1-1d213b7\">\n <a href=\"#collapse-3784f806a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-3784f806a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-3784f806a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Voor welke bedrijven is ZakelijkVastePrijs.nl geschikt?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-3784f806a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-1-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Wij helpen bedrijven van elke omvang: van ZZP'ers en kleine MKB-ondernemingen tot grootzakelijke klanten met meerdere locaties. Of u nu een kantoor, winkel, restaurant, productiebedrijf of zorginstelling heeft, wij vinden het energiecontract dat past bij uw verbruiksprofiel en wensen.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-2-1d213b7\">\n <a href=\"#collapse-8eb87396a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-8eb87396a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-8eb87396a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Hoe lang duurt het overstappen naar een nieuwe energieleverancier?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-8eb87396a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-2-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Het overstapproces duurt gemiddeld 4 tot 6 weken. De exacte duur hangt af van uw huidige contractsituatie en de einddatum van uw lopende contract. Wij zorgen voor een naadloze overgang waarbij u geen dag zonder energie zit. Na het invullen van het formulier informeren wij u direct over de mogelijke overstapdata.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-3-1d213b7\">\n <a href=\"#collapse-5e1fbbc6a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-5e1fbbc6a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-5e1fbbc6a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Wat is het verschil tussen vast, variabel en dynamisch tarief?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-5e1fbbc6a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-3-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p><strong>Vast tarief: <\/strong>De energieprijs ligt voor de hele looptijd vast. Ideaal voor prijszekerheid en budgetteren. <br \/><strong>Variabel tarief: <\/strong>De prijs wordt periodiek (meestal per maand of kwartaal) aangepast aan de marktprijs. <strong><br \/>Dynamisch tarief: <\/strong>De prijs fluctueert per uur op basis van de actuele marktprijs. Geschikt voor bedrijven die flexibel kunnen verbruiken<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-4-1d213b7\">\n <a href=\"#collapse-7bc22906a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-7bc22906a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-7bc22906a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Zijn er kosten verbonden aan het overstappen?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-7bc22906a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-4-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Nee, onze dienstverlening is volledig gratis. Wij ontvangen een vergoeding van de energieleverancier, niet van u. Let wel op: als uw huidige contract nog loopt, kan uw huidige leverancier mogelijk een opzegvergoeding in rekening brengen. Wij berekenen vooraf of overstappen financieel voordelig is, inclusief eventuele opzegkosten.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-5-1d213b7\">\n <a href=\"#collapse-41536ff6a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-41536ff6a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-41536ff6a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Welke gegevens heb ik nodig om een offerte aan te vragen?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-41536ff6a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-5-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Voor een nauwkeurige offerte hebben wij nodig: uw bedrijfsgegevens (naam en KvK-nummer), het adres van de aansluiting, uw jaarlijks verbruik van gas en elektriciteit (staat op uw jaarnota), en de einddatum van uw huidige contract. Heeft u uw jaarnota bij de hand? Upload deze dan via ons formulier voor het snelste resultaat.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n \n <div class=\"elementskit-card \">\n <div class=\"elementskit-card-header\" id=\"primaryHeading-6-1d213b7\">\n <a href=\"#collapse-49ee82b6a0c56623d8dd\" class=\"ekit-accordion--toggler elementskit-btn-link collapsed\" data-ekit-toggle=\"collapse\" data-target=\"#Collapse-49ee82b6a0c56623d8dd\" aria-expanded=\"false\" aria-controls=\"Collapse-49ee82b6a0c56623d8dd\">\n \n <span class=\"ekit-accordion-title\">Kan ik ook overstappen als ik zonnepanelen heb?<\/span>\n\n \n <div class=\"ekit_accordion_icon_group\">\n <div class=\"ekit_accordion_normal_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-down-arrow1\"><\/i> <\/div>\n\n <div class=\"ekit_accordion_active_icon\">\n \n\t\t\t\t\t\t\t\t\t\t<i class=\"icon icon-up-arrow\"><\/i> <\/div>\n <\/div>\n\n \n <\/a>\n <\/div>\n\n <div id=\"Collapse-49ee82b6a0c56623d8dd\" class=\" collapse\" aria-labelledby=\"primaryHeading-6-1d213b7\" data-parent=\"#accordion-6a0c56623d8dd\">\n\n <div class=\"elementskit-card-body ekit-accordion--content\">\n <p>Jazeker! Steeds meer zakelijke klanten hebben zonnepanelen. Wij houden rekening met uw teruglevering en zoeken een contract met gunstige teruglevervoorwaarden. Geef in het formulier aan hoeveel kWh u jaarlijks teruglevert, dan nemen wij dit mee in onze vergelijking.<\/p> <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a861392 e-flex e-con-boxed e-con e-parent\" data-id=\"a861392\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-91f62db e-flex e-con-boxed e-con e-parent\" data-id=\"91f62db\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee2ffd1 elementor-align-center elementor-widget elementor-widget-elementskit-button\" data-id=\"ee2ffd1\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"elementskit-button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\t\t<div class=\"ekit-btn-wraper\">\n\t\t\t\t\t\t\t<a href=\"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/zakelijk-energiecontract\" class=\"elementskit-btn whitespace--normal\" id=\"\">\n\t\t\t\t\tLees onze complete gids over zakelijke energiecontracten\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53e31db elementor-widget elementor-widget-spacer\" data-id=\"53e31db\" data-element_type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Welkom op ZakelijkVastePrijs.nl Zakelijk Energiecontract met Vaste Prijs. Bent u op zoek naar een betrouwbaar zakelijk energiecontract met een vaste prijs? Bij ZakelijkVastePrijs.nl vergelijken wij de beste energietarieven voor MKB en grootzakelijke klanten. Wij onderhandelen rechtstreeks met energieleveranciers zodat u altijd de scherpste prijs krijgt zonder verrassingen op uw energierekening. Vul het formulier in en […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-9379","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/pages\/9379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/comments?post=9379"}],"version-history":[{"count":218,"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/pages\/9379\/revisions"}],"predecessor-version":[{"id":9884,"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/pages\/9379\/revisions\/9884"}],"wp:attachment":[{"href":"https:\/\/www.zakelijkvasteprijs.nl\/index.php\/wp-json\/wp\/v2\/media?parent=9379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}