document.addEventListener('DOMContentLoaded', function() {
    const liveStationForm = document.getElementById('live-station-form');

    if (liveStationForm) {
        liveStationForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const stationCode = document.getElementById('station-code').value;
            const hours = document.getElementById('hours').value;
            const resultDiv = document.getElementById('live-station-result');

            resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';

            fetch(`api/live_station_handler.php?station_code=${stationCode}&hours=${hours}`)
                .then(response => response.json())
                .then(data => {
                   if(data.ResponseCode == 200 && data.Trains.length > 0) {
                        let trainsHtml = '';
                        data.Trains.forEach(train => {
                            trainsHtml += `<tr>
                                <td>${train.TrainNo}</td>
                                <td>${train.TrainName}</td>
                                <td>${train.Source}</td>
                                <td>${train.Destination}</td>
                                <td>${train.ExpectedArrival}</td>
                                <td>${train.Platform}</td>
                            </tr>`;
                        });

                        resultDiv.innerHTML = `
                            <h5 class="text-primary">Trains arriving at ${data.Station.StationName}</h5>
                            <table class="table table-dark table-striped">
                                <thead>
                                    <tr><th>Train No</th><th>Train Name</th><th>From</th><th>To</th><th>ETA</th><th>Platform</th></tr>
                                </thead>
                                <tbody>${trainsHtml}</tbody>
                            </table>
                        `;

                    } else {
                        resultDiv.innerHTML = `<div class="alert alert-warning">${data.Message || 'No trains found for this station in the selected time frame.'}</div>`;
                    }
                })
                .catch(err => {
                    console.error('Error:', err);
                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
                });
        });
    }
});