<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        Admin || <%= config.name %>
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
    <%- include("./../components/head.ejs")%>
</head>

<body class="w-100 bg-light-light h-auto">
    <%- include("./../components/nav.ejs")%>
        <div class="w-100 content bg-light-light px-3 px-md-5 py-3" id="content">
            <h2>Import <span class="badge bg-danger fs-6 fw-normal align-text-top mt-1"><strong>Caution:</strong> Experimental</span> </h2>
            <p class="text-muted">Download the required template, add your information (remove example), do not change the headings, save as a csv and upload here.</p>
            <div id="routes">
                <h2 class="mt-5">Routes</h2>
                <a class="btn btn-primary w-100 mb-2" onclick="location.href='/public/import/routes.csv'">Download template route CSV</a>
                <p><span class="fw-bold">Note: </span> For the AircraftID column you need to use the <a class="link link-primary" href="#newAirAirSel">Aircraft ID Getter</a>. This aircraft must also be in your fleet.</p>
                <br>
                <form action="/import/routes" method="POST" novalidate class="needs-validation" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-8 col-md-9">
                        <input type="file" accept=".csv" required class="form-control w-100" name="csv"> 
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Valid CSV File Required!
                        </div>
                    </div>
                    <div class="col-4 col-md-3">
                        <button class="btn btn-<%= config.other.navColor[2] %> w-100">Import</button>
                    </div>
                </div>
                </form>
            </div>
            <div id="aircraft">
                <h2 class="mt-5">Aircraft</h2>
                <p class="fw-bold">Currently Unavailable</p>
                <button class="btn btn-primary w-100 mb-2" disabled>Download template aircraft CSV</button><br>
                <br>
                <form action="/import/aircraft" method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-8 col-md-9">
                            <input disabled type="file" class="form-control w-100" name="csv">
                    </div>
                    <div class="col-4 col-md-3">
                        <button class="btn btn-<%= config.other.navColor[2] %> w-100" disabled>Import</button>
                    </div>
                </div>
                </form>
                <br>
                <h4>Aircraft ID Getter</h4>
                <label class="form-label">Aircraft
                    <select class="form-select" id="newAirAirSel" name="airID" onchange="loadAircraftLivData()">
                        <% listCraft.forEach(obj=>{%>
                            <option value='<%=obj.id%>'>
                                <%= obj.name %>
                            </option>
                            <%})%>
                    </select>
                </label><br>
                <label class="form-label">Livery
                    <select class="form-select" id="newAirLivSel" name="livID" onchange="displayID()">
                        <option value="">Waiting Selection</option>
                    </select>
                </label><br>
                <p><strong>ID: </strong> <span id="displayID">*AWAITING SELECTION*</span></p>
            </div>
        </div>
        <%- include('./../components/footer.ejs') %>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            function sort(id){
                var sel = $(`#${id}`);
                var selected = sel.val(); // cache selected value, before reordering
                var opts_list = sel.find('option');
                opts_list.sort(function(a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
                sel.html('').append(opts_list);
                sel.val(selected); // set cached selected value
                document.getElementById(id).selectedIndex = 0;
            }
            sort('newAirAirSel');
            function loadAircraftLivData() {
                const airID = document.getElementById("newAirAirSel").value;
                document.getElementById("newAirLivSel").innerHTML = "<option selected value='' disabled>Loading...</option>"
                const data = null;
                const xhr = new XMLHttpRequest();
                xhr.addEventListener("readystatechange", function () {
                    if (this.readyState === this.DONE) {
                        if (this.status == 200) {
                            const data = JSON.parse(this.responseText);
                            document.getElementById("newAirLivSel").innerHTML = "";
                            data.livery.forEach(liv => {
                                const el = document.createElement("option")
                                el.value = liv.id;
                                el.innerHTML = liv.name;
                                document.getElementById("newAirLivSel").appendChild(el)
                            })
                            displayID()
                            sort('newAirLivSel');
                        } else {
                            alert(this.status)
                        }
                    }
                });
                xhr.open("GET", `/getLivData?liv=${airID}`);
                xhr.send(data);
            }
            loadAircraftLivData()
            function displayID(){
                const LIVID = document.getElementById("newAirLivSel").value;
                document.getElementById("displayID").innerHTML = LIVID;
            }
        </script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    </body>
</html>