Add listing page details and add banner to display price and discount banner when date is in future

app/bookings/routes.py

@@ -53,6 +53,21 @@ def listings():
                            }
     )
 
+@bp.route('/listing/apply_update', methods=['POST'])
+def listing_apply_update(): 
+    data = request.get_json()
+    if 'date' not in data:
+        return jsonify({'error': 'Invalid request'}), 400
+
+    depart_date = data['date']
+    try:
+        discount, days_away = calculate_discount(depart_date)
+        return jsonify({'discount': discount, 'days_away': days_away}), 200
+
+    except ValueError:
+        error_logger.error("Invalid date format, the data passed was: " + data)
+        return jsonify({'error': 'Invalid date format'}), 400
+
 
 @bp.route('/show_listing/<int:id>', methods=['GET'])
 def show_listing_dirty(id):
@@ -68,7 +83,12 @@ def listing(id):
     listing.depart_time = pretty_time(listing.depart_time)
     listing.destination_time = pretty_time(listing.destination_time)
     filter_data = session.pop('filter_data', None)
-    return render_template('bookings/listing.html', listing=listing, filter_data=filter_data)
+
+    selected_date = filter_data['date'] if filter_data and 'date' in filter_data else None
+    discount, days_away = calculate_discount(selected_date) if selected_date else (0, 0)
+
+    return render_template('bookings/listing.html', listing=listing, selected_date=selected_date, discount=discount, days_away=days_away)
+
 
 @bp.route('/filter_bookings', methods=['POST'])
 def filter_bookings():

app/templates/bookings/listing.html

 {% extends 'base.html' %}
 {% block content %}
 <div class="container mt-5">
-    <div id="discountBanner" class="alert alert-success table" role="alert" style="width:90%; display: none;">
-        Special Offer! Get <span id="discountPercent"></span>% off on your booking as you are booking <span id="daysAway"></span> days away!
+    <div id="discountBanner" class="alert alert-success" role="alert" style="display: {% if discount > 0 %}block{% else %}none{% endif %};">
+        Special Offer! Get <span id="discountPercent">{{ discount }}</span>% off on your booking as you are booking <span id="daysAway">{{ days_away }}</span> days away!
     </div>
     <div class="date-container">
-        <div class="col-md-6 text-start mb-3 d-flex align-items-center flex-md-nowrap flex-wrap" id="dateContainer">
+        <div class="col-md-6 text-start mb-3 d-flex align-items-center flex-md-nowrap flex-wrap">
             <label class="form-label me-2">Departure Date:</label>
             <div class="col-md-6">
-                <input type="date" class="form-control" id="departDate" name="departDate" required>
+                <input type="date" class="form-control" id="departDate" name="departDate" required value="{{ selected_date or today }}">
             </div>
             <button type="button" class="btn btn-warning ms-2" id="resetDate">
                 <i class="fa-solid fa-rotate-right"></i> Reset Date
@@ -44,7 +44,10 @@
         <div class="card-body">
             <h2 class="card-title">Transport Information</h2>
             <p><strong>Transport Type:</strong> {{ listing.transport_type }}</p>
-            <p><strong>Price:</strong> £{{ listing.FairCost }}</p>
+            <p><strong>Price:</strong> £<span id="originalPrice">{{ listing.fair_cost }}</span></p>
+            <p id="discountedPrice" style="display: none;">
+                <strong>Discounted Price:</strong> £<span id="discountedPriceValue"></span>
+            </p>
         </div>
     </div>
     <div class="text-center">
@@ -55,20 +58,17 @@
             <div class="alert alert-warning mt-3" role="alert">
                 You must have an account in order to book.
                 <div class="mt-2">
-                    <a href="{{ url_for('profile.login_book_cache') }}" class="btn btn-primary me-2">Login</a>
-                    <a href="{{ url_for('profile.signup_book_cache') }}" class="btn btn-warning">Sign Up</a>
+                    <a href="{{ url_for('profile.login', callback=request.path) }}" class="btn btn-primary me-2">Login</a>
+                    <a href="{{ url_for('profile.signup', callback=request.path) }}" class="btn btn-warning">Sign Up</a>
                 </div>
             </div>
         {% endif %}
     </div>
-    
-    
 </div>
 <script>
 $(document).ready(function () {
-        const filterDataDepartDate = "{{ filter_data.date if filter_data else '' }}";
+    const filterDataDepartDate = "{{ selected_date if selected_date else '' }}";
     const resetDateButton = document.getElementById('resetDate');
-
     const today = new Date().toISOString().split('T')[0];
     const departDateInput = document.getElementById('departDate');
 
@@ -78,7 +78,6 @@
         departDateInput.value = filterDataDepartDate;
     }
 
-
     departDateInput.setAttribute('min', today);
     let maxDate = new Date();
     maxDate.setDate(maxDate.getDate() + 90);
@@ -87,12 +86,7 @@
     // Reset date to today when the reset button is clicked
     resetDateButton.addEventListener('click', () => {
         departDateInput.value = today;
-        });
-
-        // Open date picker when the date field is clicked
-        departDateInput.addEventListener('focus', (event) => {
-            event.preventDefault();
-            departDateInput.showPicker();
+        departDateInput.dispatchEvent(new Event('change'));
     });
 
     // Prevent any dates being changed by the user manually typing
@@ -103,33 +97,47 @@
     // Send the updated date to the server to check for discounts
     departDateInput.addEventListener('change', (event) => {
         const newDate = event.target.value;
-            fetch('/bookings/check_date', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ date: newDate })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.discount) {
+
+        $.ajax({
+            url: "{{ url_for('bookings.listing_apply_update') }}",
+            type: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({ date: newDate }),
+            success: function (data) {
                 const discountBanner = document.getElementById('discountBanner');
+                const originalPrice = document.getElementById('originalPrice');
+                const discountedPrice = document.getElementById('discountedPrice');
+                const discountedPriceValue = document.getElementById('discountedPriceValue');
                 const discountPercent = document.getElementById('discountPercent');
                 const daysAway = document.getElementById('daysAway');
 
-                    discountPercent.textContent = data.discount;
-                    daysAway.textContent = data.days_away;
+                if (data.discount) {
+                    const originalPriceValue = parseFloat(originalPrice.textContent.replace('£', ''));
+                    const discountValue = originalPriceValue * (1 - data.discount / 100);
+
+                    originalPrice.style.textDecoration = 'line-through';
+                    discountedPriceValue.textContent = `${discountValue.toFixed(2)}`;
+                    discountedPrice.style.display = 'block';
 
                     discountBanner.style.display = 'block';
+                    discountPercent.textContent = data.discount;
+                    daysAway.textContent = data.days_away;
                 } else {
-                    const discountBanner = document.getElementById('discountBanner');
+                    originalPrice.style.textDecoration = 'none';
+                    discountedPrice.style.display = 'none';
                     discountBanner.style.display = 'none';
                 }
-            })
-            .catch(error => {
-                console.error('Error:', error);
+            },
+            error: function () {
+                alert('Error applying discount. Please try again.');
+            }
         });
     });
+
+    // Trigger the change event to apply the initial discount if a date is selected
+    if (filterDataDepartDate) {
+        departDateInput.dispatchEvent(new Event('change'));
+    }
 });
 </script>
 {% endblock %}