Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision 3d609327dbace888fbc6a057dfb4b5c624b18c15)
+++ src/main/resources/static/FlightSearch.html	(revision 986830465c15053d3a25484f02e6e5ef26ceae2e)
@@ -8,21 +8,215 @@
     <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'>
+    <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;
+        }
+        .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;
+        }
+
+        .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;
+        }
+    </style>
 </head>
 <body>
 
 <div id="app" class="flight-search">
-    <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 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="home">Log Out</button>
     </header>
 
-    <div class="main-content">
-        <!-- Left side: Flight Search Form -->
+    <div class="split left">
         <div class="search-form-container">
-            <h1>Flight Search</h1>
+            <h2>Search flights</h2>
 
             <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>
@@ -31,4 +225,5 @@
 
                 <label for="destination">Destination</label>
+                <br>
                 <select v-model="destination" id="destination">
                     <option value="" disabled selected>Select a destination</option>
@@ -37,29 +232,28 @@
 
                 <label for="departure-date">Departure Date</label>
-                <input type="date" v-model="departureDate" id="departureDate" />
-
+                <br>
+                <input class="calendar" type="date" v-model="departureDate" id="departureDate" />
+                <br>
                 <div class="toggle-wrapper">
-                    <label for="return-date-toggle">Include Return Date</label>
-                    <input type="checkbox" v-model="showReturnDate" id="return-date-toggle" />
+                    <label for="return-date-toggle">Include Return Date<input type="checkbox" v-model="showReturnDate" id="return-date-toggle" /></label>
                 </div>
-
+                <br>
                 <div v-if="showReturnDate">
                     <label for="return-date">Return Date</label>
-                    <input type="date" v-model="returnDate" id="returnDate" />
+                    <input class="calendar" type="date" v-model="returnDate" id="returnDate" />
                 </div>
-
-                <button @click="searchFlights">Search Flights</button>
+                <br>
+                <button class="search" @click="searchFlights">Search Flights</button>
             </div>
         </div>
-
-        <!-- Right side: Available Flights List -->
-        <div class="flights-list-container" v-if="flights.length">
+    </div>
+    <div class="split right">
+        <div class="flights-list-container" v-show="isContainerVisible" v-if="flights.length">
             <h2>Available Flights</h2>
             <div class="flights-list">
                 <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>
-
-                    <!-- Heart icon for Wishlist -->
+                    <span>{{ flight.departureTime }} | {{ flight.arrivalTime }} | ${{ flight.price }} | {{ flight.availableSeats }}</span>
+
                     <span class="wishlist-heart" @click="toggleWishlist(flight)">
                         {{ flight.wishlisted ? '❤️' : '🤍' }}
@@ -68,13 +262,10 @@
             </div>
 
-            <!-- Book Button (Only appears if at least one flight is selected) -->
-            <button v-if="selectedFlights.length" @click="bookFlights" class="book-btn">
+            <button v-if="selectedFlights.length" @click="bookFlights"  class="book">
                 Book
             </button>
-
         </div>
     </div>
 
-    <!-- Popup Modal for Reporting an Issue -->
     <div v-if="showPopup" class="popup-overlay">
         <div class="popup">
@@ -93,4 +284,5 @@
         el: '#app',
         data: {
+            isContainerVisible:false,
             departureCity: '',
             destination: '',
@@ -112,18 +304,7 @@
         methods: {
             async searchFlights() {
-                console.log("button clicked");
-
+                this.isContainerVisible = !this.isContainerVisible;
                 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: {
@@ -135,24 +316,18 @@
                         });
 
-                        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) {
@@ -160,22 +335,19 @@
                     return;
                 }
+
                 const flight = this.selectedFlights[0];
-                console.log(this.selectedFlights[0]);
                 const totalCost = flight.price;
-                const bookingDate = new Date().toISOString().split('T')[0];
-
-
                 const bookingData = {
-                    flightId: flight.flightID,
-                    bookingDate: bookingDate,
+                    flightId: flight.flightId,
+                    bookingDate: new Date().toISOString().split('T')[0],
                     status: 'PENDING',
                     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)}`;
+                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flight.flightId)}`;
                     })
                     .catch(error => {
@@ -184,23 +356,21 @@
                     });
             },
-            logout() {
-                window.location.href = '/login';
+            home() {
+                window.location.href = '/';
             },
             async toggleWishlist(flight) {
                 flight.wishlisted = !flight.wishlisted;
-
                 const wishlistData = {
-                    targetId: flight.flightID,
+                    targetId: flight.flightId,
                     wishlisted: flight.wishlisted
                 };
                 try {
-                    const response = await axios.post('/api/wishlists', wishlistData);
-                    console.log("Wishlist updated");
+                    await axios.post('/api/wishlists', wishlistData);
                 } catch (error) {
-                    console.error("Error updating wishlist:", error.response ? error.response.data : error.message);
+                    console.error("Error updating wishlist:", error);
                 }
             },
             goToWishlistPage() {
-                window.location.href = '/wishlist';
+                window.location.href = '/api/wishlists';
             },
             showReportPopup() {
@@ -211,9 +381,8 @@
             },
             submitIssue() {
-                const flight = this.selectedFlights[0];
                 if (this.issueDescription.trim()) {
                     const reviewData = {
                         userID: 1,
-                        subject: this.subject,
+                        subject: "Issue Report",
                         description: this.issueDescription
                     };
@@ -225,5 +394,5 @@
                         })
                         .catch(error => {
-                            console.error("Error submitting issue:", error.response ? error.response.data : error.message);
+                            console.error("Error submitting issue:", error);
                             alert("There was an error submitting your issue. Please try again.");
                         });
@@ -232,32 +401,7 @@
                 }
             },
-            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.");
-                        });
-                } else {
-                    alert("Please enter a description for the issue.");
-                }
-            },
             async fetchFlights() {
                 try {
                     const response = await axios.get('/api/destinations');
-
                     this.cities = response.data.map(departureCity => departureCity.name);
                     this.places = response.data.map(destination => destination.name);
@@ -276,12 +420,4 @@
                     console.error("Error fetching flights", error);
                 });
-            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);
-                })
         }
     });
