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>