@include 'header.html'

<div class="container mt-5">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3>My Profile</h3>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h4>@{user.first_name} @{user.last_name}</h4>
                        <p><i class="bi bi-envelope"></i> @{user.email}</p>
                        <p>
                            <i class="bi bi-gender-ambiguous"></i>
                            @{user.gender}
                        </p>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5>Update Profile</h5>
                        </div>
                        <div class="card-body">
                            <form
                                action="/controller/user/update"
                                method="post"
                            >
                                <input
                                    type="hidden"
                                    name="id"
                                    value="@{user.id}"
                                />

                                <div class="mb-3">
                                    <label for="first_name" class="form-label"
                                        >First Name</label
                                    >
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="first_name"
                                        name="first_name"
                                        value="@{user.first_name}"
                                    />
                                    <div
                                        class="text-danger first_name-error field-error"
                                    ></div>
                                </div>

                                <div class="mb-3">
                                    <label for="last_name" class="form-label"
                                        >Last Name</label
                                    >
                                    <input
                                        type="text"
                                        class="form-control"
                                        id="last_name"
                                        name="last_name"
                                        value="@{user.last_name}"
                                    />
                                    <div
                                        class="text-danger last_name-error field-error"
                                    ></div>
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label"
                                        >New Password (leave empty to keep
                                        current)</label
                                    >
                                    <input
                                        type="password"
                                        class="form-control"
                                        id="password"
                                        name="password"
                                    />
                                    <div
                                        class="text-danger password-error field-error"
                                    ></div>
                                </div>

                                <div class="d-grid">
                                    <button
                                        type="submit"
                                        class="btn btn-primary"
                                    >
                                        Update Profile
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5>Account Actions</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="/logout" class="btn btn-danger"
                                    >Logout</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="response-container"></div>

<script>
    document.querySelector("form").addEventListener("submit", function (e) {
        e.preventDefault();
        const form = e.target;
        const formData = new FormData(form);

        fetch(form.action, {
            method: "POST",
            body: formData,
        })
            .then((response) => response.text())
            .then((html) => {
                document.getElementById("response-container").innerHTML = html;
            });
    });
</script>

<div class="card mt-4">
    <div class="card-header">
        <h5>My Bookings</h5>
    </div>
    <div class="card-body">
        @if bookings.len > 0
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>From</th>
                        <th>To</th>
                        <th>Departure</th>
                        <th>Price</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @for flight in flights
                    <tr>
                        <td>@{flight.from}</td>
                        <td>@{flight.to}</td>
                        <td>@{flight.departure}</td>
                        <td>$@{flight.price}</td>
                        <td>
                            @if flight.bookings[0].status == 'confirmed'
                            <span class="badge bg-success">Confirmed</span>
                            @else if flight.bookings[0].status == 'cancelled'
                            <span class="badge bg-danger">Cancelled</span>
                            @else
                            <span class="badge bg-warning">Pending</span>
                            @end
                        </td>
                    </tr>
                    @end
                </tbody>
            </table>
        </div>
        @else
        <p class="text-center text-muted">No bookings found</p>
        @end
    </div>
</div>

@include 'footer.html'