<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Support Tickets</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="support-ticket-container">
    <h1>Support Tickets</h1>
    <div class="ticket-layout">
        <!-- Left side: Ticket list -->
        <div class="ticket-list">
            <div class="ticket-item"
                 v-for="ticket in tickets"
                 :key="ticket.id"
                 @click="selectTicket(ticket)"
                 :class="{'active': selectedTicket && selectedTicket.id === ticket.id}">
                <div class="ticket-info">
                    <p><strong>Subject:</strong> {{ ticket.subject }}</p>
                    <p><strong>Date:</strong> {{ ticket.date }}</p>
                </div>
                <div class="ticket-actions">
                    <button @click.stop="resolveTicket(ticket.id)">Resolve</button>
                </div>
            </div>
        </div>

        <!-- Right side: Ticket details -->
        <div class="ticket-details" v-if="selectedTicket">
            <h2>Ticket Details</h2>
            <p><strong>Subject:</strong> {{ selectedTicket.subject }}</p>
            <p><strong>Description:</strong> {{ selectedTicket.description }}</p>
            <p><strong>Date:</strong> {{ selectedTicket.date }}</p>
            <button @click="resolveTicket(selectedTicket.id)">Resolve</button>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            tickets: [
                { id: 1, subject: 'Flight booking issue', description: 'Customer could not book a flight.', date: '2025-02-01' },
                { id: 2, subject: 'Payment failure', description: 'Payment was not processed during checkout.', date: '2025-02-02' }
            ],
            selectedTicket: null
        },
        methods: {
            resolveTicket(id) {
                alert(`Ticket ${id} resolved.`);
                // Optionally, you can update the ticket's status or remove it
            },
            selectTicket(ticket) {
                this.selectedTicket = ticket;
            }
        }
    });
</script>

</body>
</html>
