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(
          departure
        )}&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"}]}]