<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Reservations</title>
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app" class="my-reservations-container">
    <h1>My Reservations</h1>

    <!-- Future Reservations -->
    <h2>Future Reservations</h2>
    <div class="reservation-list">
        <div v-for="reservation in futureReservations" :key="reservation.id" class="reservation-item">
            <div class="reservation-info">
                <p><strong>Reservation ID:</strong> {{ reservation.id }}</p>
                <p><strong>Flight:</strong> {{ reservation.flight }}</p>
                <p><strong>Reservation Date:</strong> {{ reservation.date }}</p>
            </div>
        </div>
    </div>

    <!-- Past Reservations -->
    <h2>Past Reservations</h2>
    <div class="reservation-list">
        <div v-for="reservation in pastReservations" :key="reservation.id" class="reservation-item">
            <div class="reservation-info">
                <p><strong>Reservation ID:</strong> {{ reservation.id }}</p>
                <p><strong>Flight:</strong> {{ reservation.flight }}</p>
                <p><strong>Reservation Date:</strong> {{ reservation.date }}</p>
            </div>
            <div v-if="!reservation.reviewed" class="review-section">
                <button @click="openReviewModal(reservation.id)">Leave a Review</button>
            </div>
            <div v-if="reservation.reviewed" class="review-section">
                <p><strong>Review:</strong> {{ reservation.review }}</p>
            </div>
        </div>
    </div>

    <!-- Review Modal -->
    <div v-if="showReviewModal" class="review-modal">
        <div class="modal-content">
            <h3>Leave a Review</h3>
            <textarea v-model="reviewText" placeholder="Write your review here..."></textarea>
            <button @click="submitReview">Submit Review</button>
            <button @click="closeReviewModal">Cancel</button>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            reservations: [
                { id: 1, flight: 'NYC to LA', date: '2025-02-10', reviewed: false },
                { id: 2, flight: 'LA to NYC', date: '2025-01-15', reviewed: true, review: 'Great flight, on time!' },
                { id: 3, flight: 'Paris to NYC', date: '2024-12-10', reviewed: false },
            ],
            showReviewModal: false,
            reviewText: '',
            selectedReservationId: null
        },
        computed: {
            futureReservations() {
                return this.reservations.filter(reservation => new Date(reservation.date) > new Date());
            },
            pastReservations() {
                return this.reservations.filter(reservation => new Date(reservation.date) < new Date());
            }
        },
        methods: {
            openReviewModal(id) {
                this.selectedReservationId = id;
                this.showReviewModal = true;
            },
            closeReviewModal() {
                this.showReviewModal = false;
                this.reviewText = '';
            },
            submitReview() {
                const reservation = this.pastReservations.find(res => res.id === this.selectedReservationId);
                if (reservation) {
                    reservation.review = this.reviewText;
                    reservation.reviewed = true;
                }
                this.closeReviewModal();
            }
        }
    });
</script>

</body>
</html>
