@model List<Airline.Models.Seat>
@{
ViewBag.Title = "Select Seat";
var price = ViewBag.Price ?? 1000; // Price comes from BookingController
var flightId = ViewBag.FlightId;
var selectedClass = ViewBag.Class;
}
<style>
.seat-grid {
display: inline-block;
margin: 30px auto;
text-align: center;
}
.seat-row {
display: inline-block;
white-space: nowrap;
}
.seat {
width: 50px;
height: 50px;
background-color: #2196F3;
border-radius: 6px;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
cursor: pointer;
position: relative;
display: inline-block;
margin: 5px;
}
.seat:hover::after {
content: attr(data-price);
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
background: #000;
color: #fff;
padding: 2px 6px;
font-size: 12px;
white-space: nowrap;
border-radius: 4px;
z-index: 2;
}
.seat.unavailable {
background-color: #ccc;
cursor: not-allowed;
}
.seat.booked-by-user {
background-color: green;
}
.seat.window {
background-color: #4CAF50;
}
.seat.selected {
border: 3px solid yellow;
}
.continue-btn {
margin-top: 20px;
display: flex;
justify-content: center;
}
.continue-btn button {
background-color: purple;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}
h2 {
text-align: center;
margin-top: 20px;
}
</style>
<h2>Select Your Seat - @selectedClass Class</h2>
<div class="seat-grid">
@for (int i = 0; i \< Model.Count; i += 6)
{
\<div class="seat-row"\>
@for (int j = 0; j \< 6 && (i + j) \< Model.Count; j++)
{
var seat = Model\[i + j\];
var seatClass = "seat";
if (!seat.IsAvailable)
{
seatClass += " unavailable";
}
if (seat.IsWindow)
{
seatClass += " window";
}
if (seat.IsBookedByUser)
{
seatClass += " booked-by-user";
}
var seatPrice = seat.IsWindow
? "Window Seat - ₹" + (Convert.ToInt32(price) + 100)
: "₹" + price;
\<div class="@seatClass"
data-seat="@seat.SeatNumber"
data-price="@seatPrice"
onclick="selectSeat(this)"
title="Seat @seat.SeatNumber"\>
@seat.SeatNumber
\</div\>
}
\</div\>
}
</div>
<div class="continue-btn">
\<form action="/Booking/ConfirmBooking" method="post"\>
\<input type="hidden" id="selectedSeat" name="seatNumber" /\>
\<input type="hidden" name="flightId" value="@flightId" /\>
\<input type="hidden" name="class" value="@selectedClass" /\>
\<button type="submit"\>Continue\</button\>
\</form\>
</div>
<script>
let selected = null;
function selectSeat(el) {
if (el.classList.contains('unavailable')) return;
if (selected) selected.classList.remove('selected');
el.classList.add('selected');
selected = el;
document.getElementById("selectedSeat").value = el.getAttribute("data-seat");
}
</script>