document.addEventListener('DOMContentLoaded', function() {
    const trainSearchForm = document.getElementById('train-search-form');

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

            const from = document.getElementById('from-station').value;
            const to = document.getElementById('to-station').value;
            const date = document.getElementById('search-date').value.replace(/-/g, '');
            const resultDiv = document.getElementById('train-search-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/train_search_handler.php?from=${from}&to=${to}&date=${date}`)
                .then(response => response.json())
                .then(data => {
                     if(data.error) {
                        resultDiv.innerHTML = `<div class="alert alert-info">${data.error}</div>`;
                     } else if (data.ResponseCode == 200 && data.Trains.length > 0) {
                        // This part is a placeholder for when the API supports it.
                        resultDiv.innerHTML = `<div class="alert alert-success">Found trains! (Display logic to be implemented)</div>`;
                    } else {
                        resultDiv.innerHTML = `<div class="alert alert-warning">${data.Message || 'No trains found.'}</div>`;
                    }
                })
                .catch(err => {
                    console.error('Error:', err);
                    resultDiv.innerHTML = `<div class="alert alert-danger">An error occurred.</div>`;
                });
        });
    }
});