Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/FlightSearch.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -8,289 +8,21 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
-    <style>
-        body {
-            background: url('images/flight.jpg') no-repeat center center fixed;
-            background-size: cover;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-
-        .header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            background-color: rebeccapurple;
-            padding: 10px;
-            width: 100%;
-            z-index: 10;
-        }
-        .header img {
-            width: 40px;
-            height: 40px;
-            margin-right: 20px;
-        }
-
-        .header h1 {
-            color: white;
-            margin: 0;
-            font-size: 15px;
-            padding-right: 50px;
-        }
-
-        .header button {
-            background-color: transparent;
-            border: none;
-            color: white;
-            font-size: 14px;
-        }
-
-        .header button:hover {
-            background-color: transparent;
-            cursor: pointer;
-        }
-
-        .split {
-            height: 100%;
-            width: 50%;
-            position: fixed;
-            z-index: 1;
-            top: 0;
-            overflow-x: hidden;
-            padding-top: 20px;
-        }
-
-        .left {
-            left: 0;
-            padding:50px;
-        }
-
-        .right {
-            right: 0;
-            padding:10px;
-        }
-        select {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            border: 0;
-            outline: 0;
-            font: inherit;
-            width: 20em;
-            height: 3em;
-            padding: 0 4em 0 1em;
-            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-            color: white;
-            border-radius: 0.25em;
-            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-        select option {
-            color: inherit;
-            background-color: #320a28;
-        }
-        select:focus {
-            outline: none;
-        }
-        select::-ms-expand {
-            display: none;
-        }
-
-        .search-form-container h2 {
-            color: white;
-            padding-top: 110px;
-        }
-
-        .search-form {
-            padding: 10px;
-            color:white;
-            font-family: Cambria,sans-serif;
-        }
-        .search {
-            background-color: rebeccapurple;
-            color: white;
-            width: 20em;
-            height: 3em;
-        }
-
-        .book {
-            background-color: darkblue;
-            color: white;
-            width: 20em;
-            height: 3em;
-        }
-
-        .search:hover {
-            background-color: mediumpurple;
-        }
-
-        .flights-list-container {
-            color: white;
-        }
-
-        .flights-list-container h2{
-            padding-top: 110px;
-        }
-        .flights-list .flight-item {
-            margin-bottom: 15px;
-        }
-
-        .flights-list .flight-item span {
-            margin-right: 15px;
-        }
-        .flight-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 15px;
-            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            transition: transform 0.3s ease, background-color 0.3s ease;
-            width: 70%;
-            height: 15px;
-        }
-
-        .popup-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            overflow:hidden;
-        }
-
-        .popup textarea{
-            width: 100%;
-            padding: 10px;
-            margin-top: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            resize: vertical;
-            box-sizing: border-box;
-        }
-
-        .popup {
-            background-color: white;
-            padding: 20px;
-            width: 300px;
-            border-radius: 10px;
-        }
-
-        .popup button {
-            margin-top: 10px;
-            background-color: rebeccapurple;
-            color: white;
-            border: none;
-            padding: 5px;
-            cursor: pointer;
-        }
-
-        .popup button:hover {
-            background-color: mediumpurple;
-        }
-
-        .calendar {
-            background-color: transparent;
-            border-radius: 2px;
-            border-color: white;
-            width: 18.6em;
-            height: 2.5em;
-            color:white;
-        }
-
-        .notification-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background-color: red;
-            color: white;
-            border-radius: 50%;
-            padding: 0.3em;
-            font-size: 0.8em;
-        }
-
-        button i {
-            font-size: 24px;
-            color: #333;
-            position: relative;
-        }
-
-        .notifications-popup {
-            position: absolute;
-            top: 50px;
-            right: 0;
-            background: white;
-            border: 1px solid #ddd;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            max-height: 400px;
-            overflow-y: auto;
-            padding: 10px;
-            z-index: 9999;
-        }
-
-        .notifications-popup ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .notifications-popup li {
-            padding: 10px;
-            border-bottom: 1px solid #ddd;
-        }
-
-        .notifications-popup button {
-            background-color: #4CAF50; /* Green */
-            color: white;
-            padding: 10px;
-            border: none;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-
-        .notifications-popup button:hover {
-            background-color: #45a049;
-        }
-    </style>
 </head>
 <body>
 
 <div id="app" class="flight-search">
-    <header class="header">
-        <button @click="home"><img src="/images/home.png" alt="Home Icon"></button>
-        <button @click="showReportPopup">Report Issue</button>
-        <button @click="goToWishlistPage">🤍</button>
-        <button @click="goToReports">Monthly Report</button>
-        <button @click="goToReviews">Reviews</button>
-        <button @click="home">Log Out</button>
-
-        <button @click="toggleNotifications">
-            <i class="fas fa-bell"></i>
-            <span v-if="unreadNotifications > 0" class="notification-badge">{{ unreadNotifications }}</span>
-        </button>
+    <header class="app-header">
+        <button class="report-issue-btn" @click="showReportPopup">Report Issue</button>
+        <button class="report-issue-btn" @click="goToWishlistPage">🤍</button>
+        <button class="logout-btn" @click="logout">Log Out</button>
     </header>
 
-    <div class="split left">
+    <div class="main-content">
+        <!-- Left side: Flight Search Form -->
         <div class="search-form-container">
-            <h2>Search flights</h2>
+            <h1>Flight Search</h1>
 
             <div class="search-form">
                 <label for="departure-city">Departure From</label>
-                <br>
                 <select v-model="departureCity" id="departure-city">
                     <option value="" disabled selected>Select a departure city</option>
@@ -299,5 +31,4 @@
 
                 <label for="destination">Destination</label>
-                <br>
                 <select v-model="destination" id="destination">
                     <option value="" disabled selected>Select a destination</option>
@@ -306,28 +37,29 @@
 
                 <label for="departure-date">Departure Date</label>
-                <br>
-                <input class="calendar" type="date" v-model="departureDate" id="departureDate" />
-                <br>
+                <input type="date" v-model="departureDate" id="departureDate" />
+
                 <div class="toggle-wrapper">
-                    <label for="return-date-toggle">Include Return Date<input type="checkbox" v-model="showReturnDate" id="return-date-toggle" /></label>
+                    <label for="return-date-toggle">Include Return Date</label>
+                    <input type="checkbox" v-model="showReturnDate" id="return-date-toggle" />
                 </div>
-                <br>
+
                 <div v-if="showReturnDate">
                     <label for="return-date">Return Date</label>
-                    <input class="calendar" type="date" v-model="returnDate" id="returnDate" />
+                    <input type="date" v-model="returnDate" id="returnDate" />
                 </div>
-                <br>
-                <button class="search" @click="searchFlights">Search Flights</button>
+
+                <button @click="searchFlights">Search Flights</button>
             </div>
         </div>
-    </div>
-    <div class="split right">
-        <div class="flights-list-container" v-show="isContainerVisible" v-if="flights.length">
+
+        <!-- Right side: Available Flights List -->
+        <div class="flights-list-container" v-if="flights.length">
             <h2>Available Flights</h2>
             <div class="flights-list">
-                <div class="flight-item" v-for="flight in flights" :key="flight.flightID">
+                <div class="flight-item" v-for="flight in flights" :key="flight.flightId">
                     <input type="checkbox" v-model="flight.selected" />
-                    <span>{{ flight.departureTime }} | {{ flight.arrivalTime }} | ${{ flight.price }} | {{ flight.availableSeats }}</span>
-
+                    <span>{{flight.departureTime}} | {{flight.arrivalTime}} | ${{ flight.price }} | {{flight.availableSeats}}</span>
+
+                    <!-- Heart icon for Wishlist -->
                     <span class="wishlist-heart" @click="toggleWishlist(flight)">
                         {{ flight.wishlisted ? '❤️' : '🤍' }}
@@ -336,10 +68,13 @@
             </div>
 
-            <button v-if="selectedFlights.length" @click="bookFlights"  class="book">
+            <!-- Book Button (Only appears if at least one flight is selected) -->
+            <button v-if="selectedFlights.length" @click="bookFlights" class="book-btn">
                 Book
             </button>
+
         </div>
     </div>
 
+    <!-- Popup Modal for Reporting an Issue -->
     <div v-if="showPopup" class="popup-overlay">
         <div class="popup">
@@ -352,13 +87,4 @@
         </div>
     </div>
-
-    <div v-if="notificationsVisible" class="notifications-popup">
-        <ul>
-            <li v-for="notification in notifications" :key="notification.message">
-                {{ notification.message }} - {{ "RESOLVED" }}
-            </li>
-        </ul>
-        <button @click="markAllAsRead">Mark All as Read</button>
-    </div>
 </div>
 
@@ -367,5 +93,4 @@
         el: '#app',
         data: {
-            isContainerVisible:false,
             departureCity: '',
             destination: '',
@@ -376,13 +101,7 @@
             places: [],
             bookings: [],
-            pastBookings: [],
             showReturnDate: false,
             showPopup: false,
-            issueDescription: '',
-            userId:'',
-            wishlisted:false,
-            unreadNotifications: 0,
-            notifications: [],
-            notificationsVisible: false,
+            issueDescription: ""
         },
         computed: {
@@ -391,25 +110,20 @@
             }
         },
-
         methods: {
-            toggleNotifications() {
-                this.notificationsVisible = !this.notificationsVisible;
-            },
-            fetchNotifications() {
-                console.log('Fetching notifications for userId:', this.userId);
-                axios.get(`/api/notifications/${this.userId}`)
-                    .then(response => {
-                        this.notifications = response.data;
-                        this.unreadNotifications = this.notifications.filter(n => !n.read).length;
-                        console.log(response.data);
-                    })
-                    .catch(error => {
-                        console.error('Error fetching notifications:', error);
-                    });
-            },
             async searchFlights() {
-                this.isContainerVisible = !this.isContainerVisible;
+                console.log("button clicked");
+
                 if (this.departureCity && this.destination && this.departureDate) {
+                    console.log("Search parameters are valid.");
+
                     try {
+                        // Log the params being sent
+                        console.log("Params being sent:", {
+                            departureCity: this.departureCity,
+                            destination: this.destination,
+                            departureDate: this.departureDate,
+                            returnDate: this.showReturnDate ? this.returnDate : null
+                        });
+
                         const response = await axios.get('/api/flights/flight-search', {
                             params: {
@@ -421,18 +135,24 @@
                         });
 
+                        console.log("Response received:", response.data);
+
+                        // Handle no results
                         if (response.data && response.data.length > 0) {
                             this.flights = response.data;
+                            console.log("Flights found:", this.flights);
                         } else {
                             this.flights = [];
                             alert("No flights found for the given criteria.");
                         }
+
                     } catch (error) {
                         console.error("Error fetching flights", error);
                     }
                 } else {
-                    alert("Please select departure city, destination, and date.");
+                    alert("Please select departure city, destination, and date");
                     this.flights = [];
                 }
-            },
+            }
+,
             bookFlights() {
                 if (!this.selectedFlights.length) {
@@ -440,21 +160,20 @@
                     return;
                 }
-
                 const flight = this.selectedFlights[0];
-                console.log(flight);
+                console.log(this.selectedFlights[0]);
                 const totalCost = flight.price;
+                const bookingDate = new Date().toISOString().split('T')[0];
 
                 const bookingData = {
-                    flightId: flight.flightID,
-                    bookingDate: new Date().toISOString().split('T')[0],
+                    flightId: flight.flightId,
+                    bookingDate: bookingDate,
                     status: 'PENDING',
-                    totalCost: totalCost,
-                    userId:this.userId
+                    totalCost: totalCost
                 };
+                console.log("Booking Data",bookingData);
                 axios.post('/api/bookings', bookingData)
                     .then(response => {
-                        const bookingID = response.data.bookingId;
                         alert("Booked successfully!");
-                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flight.flightID)}&userId=${encodeURIComponent(this.userId)}`;
+                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}`;
                     })
                     .catch(error => {
@@ -463,36 +182,23 @@
                     });
             },
-            home() {
-                window.location.href = '/';
-            },
-            goToReports(){
-                window.location.href = '/views'
+            logout() {
+                window.location.href = '/login';
             },
             async toggleWishlist(flight) {
                 flight.wishlisted = !flight.wishlisted;
-                this.$set(this.flights, this.flights.indexOf(flight), flight);
+
                 const wishlistData = {
-                    userId: parseInt(this.userId),
-                    targetId: flight.flightID
+                    targetId: flight.flightId,
+                    wishlisted: flight.wishlisted
                 };
-                console.log(wishlistData);
-                if (!flight.wishlisted) {
-                    try {
-                        await axios.delete('/api/wishlists', { params: wishlistData });
-                        console.log("Removed from wishlist");
-                    } catch (error) {
-                        console.error("Error removing from wishlist:", error);
-                    }
-                } else {
-                    try {
-                        await axios.post('/api/wishlists/add', wishlistData);
-                        console.log("Added to wishlist");
-                    } catch (error) {
-                        console.error("Error adding to wishlist:", error);
-                    }
-                }
-            },
-            async goToWishlistPage() {
-                window.location.href = `/wishlists?userId=${encodeURIComponent(this.userId)}`;
+                try {
+                    const response = await axios.post('/api/wishlists', wishlistData);
+                    console.log("Wishlist updated");
+                } catch (error) {
+                    console.error("Error updating wishlist:", error.response ? error.response.data : error.message);
+                }
+            },
+            goToWishlistPage() {
+                window.location.href = '/wishlist';
             },
             showReportPopup() {
@@ -503,8 +209,9 @@
             },
             submitIssue() {
+                const flight = this.selectedFlights[0];
                 if (this.issueDescription.trim()) {
                     const reviewData = {
-                        userId: this.userId,
-                        subject: "Issue Report",
+                        userID: 1,
+                        subject: this.subject,
                         description: this.issueDescription
                     };
@@ -516,5 +223,29 @@
                         })
                         .catch(error => {
-                            console.error("Error submitting issue:", error);
+                            console.error("Error submitting issue:", error.response ? error.response.data : error.message);
+                            alert("There was an error submitting your issue. Please try again.");
+                        });
+                } else {
+                    alert("Please enter a description for the issue.");
+                }
+            },
+            leaveReview() {
+                const flight = this.selectedFlights[0];
+                if (this.issueDescription.trim()) {
+                    const reviewData = {
+                        userID: 1,
+                        targetID: flight.flightId,
+                        reviewComment: this.issueDescription,
+                        rating: 5,
+                        date: new Date().toISOString().split('T')[0]
+                    };
+
+                    axios.post('/api/support-tickets', reviewData)
+                        .then(response => {
+                            alert("Issue reported successfully!");
+                            this.closePopup();
+                        })
+                        .catch(error => {
+                            console.error("Error submitting issue:", error.response ? error.response.data : error.message);
                             alert("There was an error submitting your issue. Please try again.");
                         });
@@ -526,4 +257,5 @@
                 try {
                     const response = await axios.get('/api/destinations');
+
                     this.cities = response.data.map(departureCity => departureCity.name);
                     this.places = response.data.map(destination => destination.name);
@@ -531,13 +263,8 @@
                     console.error("Error fetching Destinations", error);
                 }
-            },
-            goToReviews(){
-                window.location.href = `/reviews?userId=${encodeURIComponent(this.userId)}`;
             }
         },
         mounted() {
             this.fetchFlights();
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
             axios.get('api/flights')
                 .then(response => {
@@ -547,5 +274,12 @@
                     console.error("Error fetching flights", error);
                 });
-            this.fetchNotifications();
+            axios.get('api/bookings/getAll/${flight.flightID}')
+                .then(response => {
+                    console.log(response.data);
+                    this.bookings = response.data;
+                })
+                .catch(error => {
+                    console.error("Error fetching flights", error);
+                })
         }
     });
