Index: src/main/resources/static/TransactionPage.html
===================================================================
--- src/main/resources/static/TransactionPage.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/TransactionPage.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -8,247 +8,42 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
-
-
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: 'Poppins', sans-serif
-    }
-
-    .container {
-        margin: 10px auto;
-        padding: 150px;
-        padding-top:10px;
-    }
-
-    .container .card {
-        width: 100%;
-        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        background: #fff;
-        border-radius: 0px;
-    }
-
-    body {
-        background: #eee
-    }
-
-
-    .container .card .img-box {
-        width: 80px;
-        height: 50px;
-    }
-
-    .container .card img {
-        width: 100%;
-        object-fit: fill;
-    }
-
-    .container .card .number {
-        font-size: 24px;
-    }
-
-    .container .card-body .btn.btn-primary .fab.fa-cc-paypal {
-        font-size: 32px;
-        color: #3333f7;
-    }
-
-    .fab.fa-cc-amex {
-        color: #1c6acf;
-        font-size: 32px;
-    }
-
-    .fab.fa-cc-mastercard {
-        font-size: 32px;
-        color: red;
-    }
-
-    .fab.fa-cc-discover {
-        font-size: 32px;
-        color: orange;
-    }
-
-    .c-green {
-        color: green;
-    }
-
-    .box {
-        height: 40px;
-        width: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #ddd;
-    }
-
-    .btn.btn-primary.payment {
-        background-color: #1c6acf;
-        color: white;
-        border-radius: 0px;
-        height: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 24px;
-    }
-
-
-    .form__div {
-        height: 50px;
-        position: relative;
-        margin-bottom: 24px;
-    }
-
-    .form-control {
-        width: 100%;
-        height: 45px;
-        font-size: 14px;
-        border: 1px solid #DADCE0;
-        border-radius: 0;
-        outline: none;
-        padding: 2px;
-        background: none;
-        z-index: 1;
-        box-shadow: none;
-    }
-
-    .form__label {
-        position: absolute;
-        left: 16px;
-        top: 10px;
-        background-color: #fff;
-        color: #80868B;
-        font-size: 16px;
-        transition: .3s;
-        text-transform: uppercase;
-    }
-
-    .form-control:focus+.form__label {
-        top: -8px;
-        left: 12px;
-        color: #1A73E8;
-        font-size: 12px;
-        font-weight: 500;
-        z-index: 10;
-    }
-
-    .form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
-        top: -8px;
-        left: 12px;
-        font-size: 12px;
-        font-weight: 500;
-        z-index: 10;
-    }
-    .input-group{
-        align-content: center;
-        padding-left: 500px;
-        padding-top:10px;
-    }
-    .button-group{
-        display:flex;
-        gap:10px;
-    }
-    .pay-btn,
-    .cancel-btn {
-        padding: 10px 20px;
-        font-size: 16px;
-        cursor: pointer;
-        border: none;
-        border-radius: 5px;
-    }
-
-    .pay-btn {
-        background-color: #4CAF50; /* Green background for the pay button */
-        color: white;
-    }
-
-    .cancel-btn {
-        background-color: #f44336; /* Red background for the cancel button */
-        color: white;
-    }
-</style>
 <body>
 
-<div id="app" class="container">
-    <div class="row">
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/visa-logo-download-png-21.png" alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold" for="">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/mastercard-png/file-mastercard-logo-svg-wikimedia-commons-4.png"
-                                 alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/discover-png-logo/credit-cards-discover-png-logo-4.png"
-                                 alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 mt-4">
-                    <div class="card p-3">
-                        <p class="mb-0 fw-bold h4">Payment Methods</p>
-                    </div>
-                </div>
+<div id="app" class="transaction-container">
+    <div class="transaction-box">
+        <h2>Complete Your Payment</h2>
+
+        <form @submit.prevent="processPayment">
+            <div class="input-group">
+                <label for="cardholder">Cardholder Name</label>
+                <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
             </div>
-            <form class="submit" @submit.prevent="processPayment">
-                <div class="input-group">
-                    <label for="cardholder">Cardholder Name</label>
-                    <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
-                </div>
 
-                <div class="input-group">
-                    <label for="cardNumber">Card Number</label>
-                    <input type="text"
-                           id="cardNumber"
-                           v-model="cardNumber"
-                           maxlength="16"
-                           placeholder="1234 5678 9012 3456"
-                           required />
-                </div>
+            <div class="input-group">
+                <label for="cardNumber">Card Number</label>
+                <input type="text"
+                       id="cardNumber"
+                       v-model="cardNumber"
+                       maxlength="16"
+                       placeholder="1234 5678 9012 3456"
+                       required />
+            </div>
 
-                <div class="input-group">
-                    <label for="expiration">Expiration Date</label>
-                    <input type="month" id="expiration" v-model="expiration" required />
-                </div>
+            <div class="input-group">
+                <label for="expiration">Expiration Date</label>
+                <input type="month" id="expiration" v-model="expiration" required />
+            </div>
 
-                <div class="button-group">
-                    <button type="submit" class="pay-btn">Pay</button>
-                    <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
-                </div>
-            </form>
+            <div class="button-group">
+                <button type="submit" class="pay-btn">Pay</button>
+                <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
+            </div>
+        </form>
+
+        <div v-if="paymentSuccess" class="success-message">
+            ✅ Payment successful! Redirecting...
         </div>
+    </div>
+</div>
 
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -258,12 +53,19 @@
         el: '#app',
         data: {
-            bookingId: '',
             cardholder: '',
             cardNumber: '',
             expiration: '',
             amount: '',
-            paymentSuccess: false,
-            flightId:'',
-            userId:''
+            paymentSuccess: false
+        },
+        created(){
+            const urlParams = new URLSearchParams(window.location.search);
+            this.flightId = urlParams.get('flightId');
+            this.amount = urlParams.get('amount');
+
+            const user = JSON.parse(localStorage.getItem("user"));
+            if(user){
+                this.userId = user.id;
+            }
         },
         methods: {
@@ -273,36 +75,19 @@
                     transaction_date:paymentDate,
                     payment_status:'SUCCESS',
-                    amount:Number(this.amount) || null,
-                    userId:Number(this.userId) || null,
-                    bookingId:Number(this.bookingId) || null
+                    amount:this.amount,
+                    userId:this.userId,
+                    bookingId:this.bookingId
                 };
-                console.log(transaction);
+
                 axios.post('api/payments', transaction)
                     .then(response => {
-                        console.log(response.data);
+                        console.log("Payment successful");
                         this.paymentSuccess = true;
-                        this.updateBooking();
                         setTimeout(() => window.location.href = '/flights',2000);
                 })
                     .catch(error => console.error("Payment failed", error));
             },
-            updateBooking() {
-                const booking = {
-                    bookingDate: new Date().toISOString().split('T')[0],
-                    flightId:this.flightId,
-                    payment_status:'SUCCESS',
-                    total_cost:Number(this.amount) || null,
-                    userId:Number(this.userId) || null,
-                    bookingId:Number(this.bookingId) || null
-                };
-                console.log(booking);
-                axios.put(`api/flights/${this.bookingId}`, booking)
-                    .then(response => {
-                        console.log(response.data);
-                    })
-                    .catch(error => console.error("Booking update failed", error));
-            },
             cancelPayment() {
-                window.location.href = '/flights';
+                window.location.href = '/flights'; // Redirecting to flight search on cancel
             },
             validateForm() {
@@ -313,11 +98,4 @@
                 );
             }
-        },
-        mounted(){
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
-            this.bookingId = params.get("bookingId");
-            this.flightId = params.get("flightId");
-            this.amount=params.get("amount");
         }
     });
