For some reason the calculate my savings button stopped working - Follow Up Deployment

index.html

@@ -327,6 +327,36 @@
                         <button id="calculate-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
                             Calculate My Savings
                         </button>
+                        
+                        <div id="report-form" class="hidden mt-6 space-y-4">
+                            <div>
+                                <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
+                                <input type="text" id="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            <div>
+                                <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
+                                <input type="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                            </div>
+                            <div class="flex">
+                                <div class="w-1/4 mr-2">
+                                    <label for="country-code" class="block text-sm font-medium text-gray-700">Country Code</label>
+                                    <select id="country-code" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                                        <option value="1" selected>USA (+1)</option>
+                                        <option value="44">UK (+44)</option>
+                                        <option value="33">France (+33)</option>
+                                        <option value="49">Germany (+49)</option>
+                                        <option value="351">Portugal (+351)</option>
+                                    </select>
+                                </div>
+                                <div class="flex-1">
+                                    <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
+                                    <input type="tel" id="phone" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                                </div>
+                            </div>
+                            <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
+                                Submit Report Request
+                            </button>
+                        </div>
                     </div>
                 </div>
                 
@@ -595,12 +625,13 @@
                 <a href="https://www.youtube.com/channel/example" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
                     <i class="fab fa-youtube text-2xl mr-2"></i> Watch Our YouTube Series
                 </a>
-                <a href="https://www.instagram.com/example" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
-                    <i class="fab fa-instagram text-2xl mr-2"></i> Follow on Instagram
-                </a>
                 <a href="https://www.facebook.com/groups/californiatomadeira" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
                     <i class="fab fa-facebook-f text-2xl mr-2"></i> Join Facebook Group
                 </a>
+                <a href="https://www.instagram.com/example" target="_blank" class="flex items-center text-white hover:text-blue-100 transition duration-300">
+                    <i class="fab fa-instagram text-2xl mr-2"></i> Follow on Instagram
+                </a>
+                
             </div>
         </div>
     </section>
@@ -698,6 +729,63 @@
     <!-- Calculator functionality -->
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Show report form when calculate button is clicked
+            document.getElementById('calculate-btn').addEventListener('click', function() {
+                // First calculate the savings (existing functionality)
+                const housing = parseFloat(document.getElementById('housing').value);
+                const healthcare = parseFloat(document.getElementById('healthcare').value);
+                const groceries = parseFloat(document.getElementById('groceries').value);
+                const taxes = parseFloat(document.getElementById('taxes').value);
+                
+                const madeiraHousing = housing * 0.3;
+                const madeiraHealthcare = healthcare * 0.125;
+                const madeiraGroceries = groceries * 0.4;
+                const madeiraTaxes = 0;
+                
+                const savingsHousing = housing - madeiraHousing;
+                const savingsHealthcare = healthcare - madeiraHealthcare;
+                const savingsGroceries = groceries - madeiraGroceries;
+                const savingsTaxes = taxes - madeiraTaxes;
+                
+                const calTotal = housing + healthcare + groceries + taxes;
+                const madeiraTotal = madeiraHousing + madeiraHealthcare + madeiraGroceries + madeiraTaxes;
+                const savingsTotal = calTotal - madeiraTotal;
+                const annualSavings = savingsTotal * 12;
+                
+                // Update results display
+                document.getElementById('cal-housing').textContent = housing.toLocaleString();
+                document.getElementById('madeira-housing').textContent = madeiraHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
+                document.getElementById('savings-housing').textContent = savingsHousing.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                document.getElementById('cal-healthcare').textContent = healthcare.toLocaleString();
+                document.getElementById('madeira-healthcare').textContent = madeiraHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
+                document.getElementById('savings-healthcare').textContent = savingsHealthcare.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                document.getElementById('cal-groceries').textContent = groceries.toLocaleString();
+                document.getElementById('madeira-groceries').textContent = madeiraGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
+                document.getElementById('savings-groceries').textContent = savingsGroceries.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                document.getElementById('cal-taxes').textContent = taxes.toLocaleString();
+                document.getElementById('madeira-taxes').textContent = madeiraTaxes.toLocaleString();
+                document.getElementById('savings-taxes').textContent = savingsTaxes.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                document.getElementById('cal-total').textContent = calTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
+                document.getElementById('madeira-total').textContent = madeiraTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
+                document.getElementById('savings-total').textContent = savingsTotal.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                document.getElementById('annual-savings').textContent = annualSavings.toLocaleString(undefined, {maximumFractionDigits: 0});
+                
+                // Show results
+                document.getElementById('results-placeholder').classList.add('hidden');
+                document.getElementById('results-container').classList.remove('hidden');
+                
+                // Show the report form
+                document.getElementById('report-form').classList.remove('hidden');
+                
+                // Scroll to results for better UX
+                document.getElementById('results-container').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            });
+            
             // Sync range inputs with number inputs
             const syncInputs = (rangeId, numberId) => {
                 const rangeInput = document.getElementById(rangeId);