do debugging After Clicking Confirm Booking, the app should present another form showing the car booking and booking information as a confirmation of the clients booking.

admin-dashboard.html

@@ -350,10 +350,42 @@
                     <i data-feather="check" class="text-green-600"></i>
                 </div>
                 <h3 class="text-lg font-medium text-gray-900 mb-2">Booking Confirmed!</h3>
-                <div class="mt-2 text-sm text-gray-500">
-                    <p>Your service booking has been confirmed. A confirmation email has been sent to your registered email address.</p>
+                <div class="mt-2 text-sm text-gray-500 bg-gray-50 p-4 rounded-lg">
+                    <div class="space-y-2">
+                        <div class="flex justify-between">
+                            <span class="font-medium">Reference #:</span>
+                            <span id="bookingRef"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="font-medium">Customer Name:</span>
+                            <span id="confirmName"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="font-medium">Phone:</span>
+                            <span id="confirmPhone"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="font-medium">Vehicle:</span>
+                            <span id="confirmVehicle"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="font-medium">Service Type:</span>
+                            <span id="confirmService"></span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="font-medium">Date:</span>
+                            <span id="confirmDate"></span>
+                        </div>
+                        <div id="confirmCarSection" class="hidden">
+                            <div class="flex justify-between">
+                                <span class="font-medium">Courtesy Car:</span>
+                                <span id="confirmCar"></span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <div class="mt-5">
+                <p class="mt-3 text-sm text-gray-500">A confirmation email has been sent to your registered email address. Please bring this reference number when you visit us.</p>
+<div class="mt-5">
                     <button id="closeConfirmation" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                         Close
                     </button>
@@ -448,11 +480,24 @@
                 alert('Please select a courtesy car or uncheck the courtesy car option');
                 return;
             }
-
-            // For demo purposes, we'll just show the confirmation modal
-            // In a real app, you would send this data to your backend API
-            console.log('Booking submitted:', formData);
+            // Generate random reference number
+            const bookingRef = 'AS-' + Math.floor(100000 + Math.random() * 900000);
             
+            // Update confirmation modal fields
+            document.getElementById('bookingRef').textContent = bookingRef;
+            document.getElementById('confirmName').textContent = formData.name;
+            document.getElementById('confirmPhone').textContent = formData.phone;
+            document.getElementById('confirmVehicle').textContent = `${formData.make} ${formData.model} (${formData.reg})`;
+            document.getElementById('confirmService').textContent = formData.serviceType;
+            document.getElementById('confirmDate').textContent = new Date(formData.date).toLocaleDateString('en-ZA');
+            
+            if (formData.courtesyCar) {
+                document.getElementById('confirmCarSection').classList.remove('hidden');
+                document.getElementById('confirmCar').textContent = document.querySelector('.courtesy-car-card.border-primary')?.querySelector('h5').textContent || 'Not specified';
+            } else {
+                document.getElementById('confirmCarSection').classList.add('hidden');
+            }
+
             // Show confirmation modal
             const confirmationModal = document.getElementById('confirmationModal');
             confirmationModal.classList.remove('hidden');
@@ -464,7 +509,7 @@
                 card.classList.remove('border-primary', 'border-2');
                 card.querySelector('i').classList.add('hidden');
             });
-        });
+});
 // Close confirmation modal
         document.getElementById('closeConfirmation').addEventListener('click', function() {
             const confirmationModal = document.getElementById('confirmationModal');

index.html

@@ -351,9 +351,40 @@
                     </div>
                     <h3 class="text-lg font-medium text-gray-900 mb-2">Booking Confirmed!</h3>
                     <div class="mt-2 text-sm text-gray-500 bg-gray-50 p-4 rounded-lg">
-                        <!-- Booking details will be inserted here -->
+                        <div class="space-y-2">
+                            <div class="flex justify-between">
+                                <span class="font-medium">Reference #:</span>
+                                <span id="bookingRef"></span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Customer Name:</span>
+                                <span id="confirmName"></span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Phone:</span>
+                                <span id="confirmPhone"></span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Vehicle:</span>
+                                <span id="confirmVehicle"></span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Service Type:</span>
+                                <span id="confirmService"></span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span class="font-medium">Date:</span>
+                                <span id="confirmDate"></span>
+                            </div>
+                            <div id="confirmCarSection" class="hidden">
+                                <div class="flex justify-between">
+                                    <span class="font-medium">Courtesy Car:</span>
+                                    <span id="confirmCar"></span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <p class="mt-3 text-sm text-gray-500">A confirmation email has been sent to your registered email address.</p>
+                    <p class="mt-3 text-sm text-gray-500">A confirmation email has been sent to your registered email address. Please bring this reference number when you visit us.</p>
 <div class="mt-5">
                     <button id="closeConfirmation" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm">
                         Close
@@ -450,24 +481,24 @@
                 alert('Please select a courtesy car or uncheck the courtesy car option');
                 return;
             }
-            // Create booking details string
-            let bookingDetails = `
-                <h4 class="font-bold text-lg mb-2">Booking Confirmation</h4>
-                <div class="space-y-2 text-left">
-                    <p><span class="font-medium">Name:</span> ${formData.name}</p>
-                    <p><span class="font-medium">Phone:</span> ${formData.phone}</p>
-                    <p><span class="font-medium">Email:</span> ${formData.email}</p>
-                    <p><span class="font-medium">Vehicle:</span> ${formData.make} ${formData.model} (${formData.reg})</p>
-                    <p><span class="font-medium">Service:</span> ${formData.serviceType}</p>
-                    <p><span class="font-medium">Date:</span> ${formData.date}</p>
-                    ${formData.courtesyCar ? `<p><span class="font-medium">Courtesy Car:</span> ${document.querySelector('.courtesy-car-card.border-primary')?.querySelector('h5').textContent || 'Not specified'}</p>` : ''}
-                </div>
-            `;
-
-            // Update confirmation modal with booking details
-            document.getElementById('confirmationModal').querySelector('.text-sm').innerHTML = bookingDetails;
+            // Generate random reference number
+            const bookingRef = 'AS-' + Math.floor(100000 + Math.random() * 900000);
             
-            // Show confirmation modal
+            // Update confirmation modal fields
+            document.getElementById('bookingRef').textContent = bookingRef;
+            document.getElementById('confirmName').textContent = formData.name;
+            document.getElementById('confirmPhone').textContent = formData.phone;
+            document.getElementById('confirmVehicle').textContent = `${formData.make} ${formData.model} (${formData.reg})`;
+            document.getElementById('confirmService').textContent = formData.serviceType;
+            document.getElementById('confirmDate').textContent = new Date(formData.date).toLocaleDateString('en-ZA');
+            
+            if (formData.courtesyCar) {
+                document.getElementById('confirmCarSection').classList.remove('hidden');
+                document.getElementById('confirmCar').textContent = document.querySelector('.courtesy-car-card.border-primary')?.querySelector('h5').textContent || 'Not specified';
+            } else {
+                document.getElementById('confirmCarSection').classList.add('hidden');
+            }
+// Show confirmation modal
             const confirmationModal = document.getElementById('confirmationModal');
             confirmationModal.classList.remove('hidden');