<!doctype html>
<html lang="fr">
<head>
    <title>Calculateur TGVMax</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
          crossorigin="anonymous">
</head>
<body>
    <form id="form" action="#">
        <datalist id="iataCodes">
            <option value="Chargement…">
        </datalist>
        <div class="mb-3">
            <label for="origin" class="form-label">Origine :</label>
            <input type="text" class="form-control" list="iataCodes" id="origin"
                   placeholder="Origine…" aria-describedby="originHelp">
            <input type="hidden" class="form-control" id="originIata">
            <div id="originHelp" class="form-text">Le point de départ de votre trajet.</div>
        </div>
        <div class="mb-3">
            <label for="destination" class="form-label">Destination :</label>
            <input type="text" class="form-control" list="iataCodes" id="destination"
                   placeholder="Destination…" aria-describedby="destinationHelp">
            <input type="hidden" class="form-control" id="destinationIata">
            <div id="destinationHelp" class="form-text">Le point d'arrivée de votre trajet.</div>
        </div>
        <div class="mb-3">
            <label for="day" class="form-label">Jour de départ :</label>
            <input type="date" class="form-control" id="day" aria-describedby="dayHelp"
                   min="{{ today }}" max="{{ max_day }}" value="{{ today }}">
            <div id="dayHelp" class="form-text">Le jour de votre départ.</div>
        </div>
        <div class="mb-3">
            <input type="submit" class="form-control btn btn-primary" value="Rechercher…">
        </div>
    </form>
    <div id="result"></div>
</body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>

<script>
    fetch('/api/iata-codes/').then(res => res.json()).then(out => {
        let datalist = document.getElementById('iataCodes')
        datalist.innerHTML = ''
        for (let iata in out.iata2name) {
            let name = out.iata2name[iata]
            let elem = document.createElement('option')
            elem.value = name
            elem.setAttribute('data-iata', iata)
            datalist.appendChild(elem)
        }
    })

    let origin_elem = document.getElementById('origin')
    let origin_iata_elem = document.getElementById('originIata')
    origin_elem.addEventListener('change', () => {
        let selector = document.querySelector('option[value="' + origin_elem.value + '"]')
        if (selector !== null) {
            origin_iata_elem.value = selector.getAttribute('data-iata')
        }
    })

    let destination_elem = document.getElementById('destination')
    let destination_iata_elem = document.getElementById('destinationIata')
    destination_elem.addEventListener('change', () => {
        let selector = document.querySelector('option[value="' + destination_elem.value + '"]')
        if (selector !== null) {
            destination_iata_elem.value = selector.getAttribute('data-iata')
        }
    })

    let day_elem = document.getElementById('day')
    let result_elem = document.getElementById('result')
    document.getElementById('form').addEventListener('submit', () => {
        result_elem.innerHTML = 'Chargement…'
        fetch('/api/routes/' + day_elem.value + '/' + origin_iata_elem.value + '/' + destination_iata_elem.value + '/')
            .then(resp => resp.json())
            .then(routes => {
                console.log(routes)
                result_elem.innerHTML = ''
                let routes_elem = document.createElement('ul')
                result_elem.appendChild(routes_elem)
                for (let route in routes) {
                    route = routes[route]
                    console.log(route)
                    let route_elem = document.createElement('li')
                    routes_elem.appendChild(route_elem)

                    let text = route[0].origin
                    for (let train in route) {
                        train = route[train]
                        console.log(train)
                        text += " (" + train.departure + ") --> (" + train.arrival + ") " + train.destination + ", "
                    }
                    route_elem.textContent = text
                }
            })
    })
</script>
</html>