<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
            <div class="container-fluid">
              <a class="navbar-brand" href="/book_movies?user=<%=username%>&user_id=<%=user%>">Movie Booking System</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
            </div>
        </nav>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Booked Tickets</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="row" style="margin-left: 20px;margin-right: 10px;">
            <% for(let i = 0;i<movie_names.length;i++){ %>
                <div class="col-sm-6 card mb-3 flex-column mx-auto" style="max-width:18rem;margin-top: 2em;">
                    <div class="card-header">Booking <%=i+1%></div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title"><%=movie_names[i]%></h5>
                        <h6 class="card-subtitle"><%=movie_types[i]%></h6>
                        <p class="card-text">
                            Runtime : <%=movie_lengths[i]%> minutes
                        </p>
                        <br>
                        <p class="card-text">
                            Show Date : <%=show_dates[i]%>
                        </p>
                        <br>
                        <p class="card-text">
                            Show Time : <%=show_times[i]%>
                        </p>
                        <br>
                        <p class="card-text">
                            Total seats booked : <%=admits[i]%>
                        </p>
                        <br>
                        <p class="card-text">
                            Seat Type : <%=seat_types[i]%>
                        </p>
                        <br>
                        <h5 class="card-text">Total Spent : â‚¹ <%=total_bills[i]%></h1>
                        <div class="row">
                            <div class="col-6">
                                <a class="btn btn-success" href="/modify_booking?user_id=<%=user%>&user=<%=username%>&movie_id=<%=movie_ids[i]%>">Modify Booking</a>
                            </div>
                            <div class="col">
                                <a class="btn btn-danger" href="/delete_booking?user_id=<%=user%>&user=<%=username%>&movie_id=<%=movie_ids[i]%>">Delete Booking</a>
                            </div>
                        </div>
                    </div>
                </div>
            <%} %>
        </div>
    </body>