display schedules like a table, not a table, first only display the destination departure departure station departure time and destination station arrival time and vehicle number. when clicked on expand show routes

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<title>Bus Schedule and Timeline</title>
<link
rel=“stylesheet”
href=“https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”
/>
<style>
body {
font-family: “Roboto”, sans-serif;
}

.station {
position: relative;
margin: 10px 0px;
display: flex;
flex-direction: row;
align-items: center;
}

.timeline {
content: “”;
position: absolute;
top: 50%;
bottom: -60%;
border-left: 4px solid #4c51bf;
z-index: 1;
}

.station:last-child .timeline {
border-left: none;
}

.hoi {
content: “”;
position: relative;
width: 16px;
height: 16px;
left: 2px;
background-color: #fff;
border: 4px solid #4c51bf;
border-radius: 50%;
transform: translateX(-50%);
z-index: 2;
}

.time-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
z-index: 3;
width: 20px;
}

.station-time {
padding: 5px 10px;
background-color: #4c51bf;
color: #fff;
border-radius: 12px;
white-space: nowrap;
z-index: 3;
margin-right: 20px;
}

.station-name {
flex-grow: 1;
margin-left: 20px;
margin-right: 20px;
z-index: 3;
}

.header-row {
display: flex;
justify-content: space-between;
padding: 10px;
font-weight: bold;
}
.green-bg {
background-color: #10b981;
}

.green-border {
border-color: #10b981;
}

.green-line {
border-left-color: #10b981;
}
</style>
</head>

<body>
<div class=“container mx-auto px-4”>
<h1 class=“text-3xl font-bold text-center my-4”>Bus Schedule</h1>
<div class=“grid grid-cols-2 gap-4”>
<div class=“bg-gray-100 p-4 rounded-md”>
<label
for=“departure”
class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”
>Departure</label
>
<input
type=“text”
id=“departure”
class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white”
placeholder=“Enter departure”
/>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<label
for=“destination”
class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”
>Destination</label
>
<input
type=“text”
id=“destination”
class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white”
placeholder=“Enter destination”
/>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<label
for=“time”
class=“block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300”
>Time</label
>
<input
type=“time”
id=“time”
class=“bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white”
/>
</div>
<div class=“bg-gray-100 p-4 rounded-md”>
<button
type=“submit”
onclick=“submitForm()”
class=“bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg”
>
Submit
</button>
</div>
</div>
</div>

<div class=“bg-gray-100 font-roboto”>
<div class=“max-w-xl mx-auto py-12 px-4 sm:px-6 lg:px-2”>
<div class=“mt-8” id=“scheduleContainer”>
<!-- Schedule will be dynamically populated here -->
</div>
</div>
</div>

<script>
async function submitForm() {
const departure = document.getElementById(“departure”).value;
const destination = document.getElementById(“destination”).value;
// const time = document.getElementById(‘time’).value;
const time = “12:24”;

// Make API request
const apiUrl = https://busapi.amithv.xyz/api/v1/schedules?departure=${encodeURIComponent(<br/> departure<br/> )}&destination=${encodeURIComponent(destination)};

try {
const response = await fetch(apiUrl);
const scheduleData = await response.json();

// Process the schedule data and update the scheduleContainer
updateSchedule(scheduleData,departure,destination);
} catch (error) {
console.error(“Error fetching data:”, error);
}
}

function updateSchedule(scheduleData,departure,destination) {
departure = departure.toUpperCase();
destination = destination.toUpperCase();

const scheduleContainer = document.getElementById(“scheduleContainer”);
scheduleContainer.innerHTML = “”; // Clear previous schedule

scheduleData.forEach((trip, index, array) => {
let vehicleDiv = document.createElement(“div”);
vehicleDiv.textContent = Vehicle Number: ${trip.vehicle_number}, Trip: ${trip.trip};
scheduleContainer.appendChild(vehicleDiv);

let hasDeparted = false;
let hasArrived = false;

trip.stations.forEach((station, stationIndex) => {
let stationDiv = document.createElement(“div”);
stationDiv.classList.add(“station”);

if (station.station.toUpperCase().startsWith(departure)) {
hasDeparted = true;
}

let arrivalTimeDiv = document.createElement(“div”);
arrivalTimeDiv.classList.add(“station-time”);
if (hasDeparted && !hasArrived) {
arrivalTimeDiv.classList.add(“green-bg”);
}
arrivalTimeDiv.textContent = station.arrivalTime;
stationDiv.appendChild(arrivalTimeDiv);

let timeWrapperDiv = document.createElement(“div”);
timeWrapperDiv.classList.add(“time-wrapper”);

let hoiDiv = document.createElement(“div”);
hoiDiv.classList.add(“hoi”);
if (hasDeparted && !hasArrived) {
hoiDiv.classList.add(“green-border”);
}
timeWrapperDiv.appendChild(hoiDiv);

if (stationIndex !== trip.stations.length - 1 && !hasArrived) {
let timelineDiv = document.createElement(“div”);
timelineDiv.classList.add(“timeline”);
if (
hasDeparted &&
!hasArrived &&
!station.station.toUpperCase().startsWith(destination)
) {
timelineDiv.classList.add(“green-line”);
}
timeWrapperDiv.appendChild(timelineDiv);
}

stationDiv.appendChild(timeWrapperDiv);

let stationNameDiv = document.createElement(“div”);
stationNameDiv.classList.add(“station-name”);
stationNameDiv.textContent = station.station;
stationDiv.appendChild(stationNameDiv);

let departureTimeDiv = document.createElement(“div”);
departureTimeDiv.classList.add(“station-time”);
if (hasDeparted && !hasArrived) {
departureTimeDiv.classList.add(“green-bg”);
}
departureTimeDiv.textContent = station.departureTime;
stationDiv.appendChild(departureTimeDiv);

scheduleContainer.appendChild(stationDiv);

if (station.station.toUpperCase().startsWith(destination)) {
hasArrived = true;
}
});
});
}
</script>
</body>
</html>



this is the sample API response
[{“vehicle_number”:“KL 39 P 5666”,“trip”:10,“stations”:[{“station”:“HIGH COURT JUNCTION”,“arrivalTime”:“08:18 pm”,“departureTime”:“08:18 pm”},{“station”:“ERNAKULAM SOUTH”,“arrivalTime”:“08:25 pm”,“departureTime”:“08:25 pm”},{“station”:“POOTHOTTA”,“arrivalTime”:“09:25 pm”,“departureTime”:“09:25 pm”}]},{“vehicle_number”:“KL 17 B 5276”,“trip”:10,“stations”:[{“station”:“HIGH COURT JUNCTION”,“arrivalTime”:“08:19 pm”,“departureTime”:“08:19 pm”},{“station”:“ERNAKULAM SOUTH”,“arrivalTime”:“08:26 pm”,“departureTime”:“08:26 pm”},{“station”:“POOTHOTTA”,“arrivalTime”:“09:26 pm”,“departureTime”:“09:26 pm”}]},{“vehicle_number”:“KL 13 N 1929”,“trip”:10,“stations”:[{“station”:“HIGH COURT JUNCTION”,“arrivalTime”:“08:21 pm”,“departureTime”:“08:21 pm”},{“station”:“ERNAKULAM SOUTH”,“arrivalTime”:“08:31 pm”,“departureTime”:“08:31 pm”},{“station”:“POOTHOTTA”,“arrivalTime”:“09:31 pm”,“departureTime”:“09:31 pm”}]},{“vehicle_number”:“KL 08 AP 4141”,“trip”:15,“stations”:[{“station”:“KAKKANAD”,“arrivalTime”:“08:08 pm”,“departureTime”:“08:08 pm”},{“station”:“HIGH COURT JUNCTION”,“arrivalTime”:“08:36 pm”,“departureTime”:“08:43 pm”},{“station”:“ERNAKULAM SOUTH”,“arrivalTime”:“08:51 pm”,“departureTime”:“08:51 pm”}]},{“vehicle_number”:“KL 41 A 1251”,“trip”:12,“stations”:[{“station”:“HIGH COURT JUNCTION”,“arrivalTime”:“09:03 pm”,“departureTime”:“09:03 pm”},{“station”:“ERNAKULAM SOUTH”,“arrivalTime”:“09:10 pm”,“departureTime”:“09:10 pm”},{“station”:“CHOTTANIKKARA JN”,“arrivalTime”:“10:00 pm”,“departureTime”:“10:00 pm”}]}]