<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">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.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 class="d-inline-block">Routes</h2>
            <button type="button" class="btn btn-<%= config.other.navColor[2] %> float-end" data-bs-toggle="modal"
                data-bs-target="#exampleModal">
                Add Route
            </button>
            <p class="text-muted">Click on a route to see more.</p>
            <div class="table-responsive">
                <table data-toggle="table" data-search="true" data-show-columns="true" id="mainTable">
                    <thead>
                        <tr class="tr-class-2">
                            <th data-field="name">Name</th>
                            <th data-field="aircraft">Aircraft</th>
                            <th data-field="flightime">Flight Time</th>
                            <th data-field="airline">Airline</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% routes.forEach(route=>{%>
                            <tr id="tr-id-<%=route.id%>" class="tr-class-<%=route.id%> pirepClickable" data-title="<%=route.id%>"
                                title="<%= route.id%>" data-object='{"key": "value"}' style="cursor: pointer;" data-bs-toggle="modal"
                                data-bs-target="#modal-<%=route.id%>">
                                <td id="td-id-<%=route.id %>" class="td-class-<%=route.id %>" data-title="<%= route.id %>">
                                    <strong>
                                        <%= operator_search.get(route.operator).code + route.num %>
                                    </strong>
                                </td>
                                <td data-text="<%= route.aircraftPublic %>">
                                    <%= route.aircraftPublic %>
                                </td>
                                <td data-text="<%= route.ft %>">
                                    <%= route.ft %>
                                </td>
                                <td data-text="<%= route.operatorPublic %>">
                                    <%= route.operatorPublic %>
                                </td>
                            </tr>
                        <%})%>
                    </tbody>
                </table>
                <% routes.forEach(route=>{%>
                <div class="modal fade" id="modal-<%= route.id%>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Route Manager</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form method="POST" action="/admin/routes/update" class="needs-validation" novalidate>
                                    <h2>Modify <%=route.operatorCode + route.num%></h2>
                                    <br>
                                    <div class="input-group mb-3">
                                        <span class="input-group-text" id="RouteOperCode">
                                            <%= route.operatorCode %>
                                        </span>
                                        <input type="text" class="form-control text-secondary" placeholder="Route Number" aria-label="Route Number" required=""
                                            aria-describedby="RouteOperCode" name="num" value="<%= route.num%>" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Aircraft<span style="font-size:12px"> (Can select multiple)</span></label>
                                        <select class="form-select" name="aircraft" multiple required>
                                            <% craft.forEach(vic=>{%>
                                                <option value="<%= vic.livID%>" <% if(route.aircraft.split(",").includes(vic.livID)){%>selected<%}%>>
                                                        <%= vic.publicName%>
                                                </option>
                                                <%})%>
                                        </select>
                                        <div class="valid-feedback">Looks good!</div>
                                        <div class="invalid-feedback">Need to select at least one aircraft.</div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Flight Time<span style="font-size:12px"> (minutes, aprox)</span></label>
                                        <input type="number" class="form-control" placeholder="Flight Time (mins)" required="" aria-label="Flight Time" name="ft" value="<%= route.ft%>">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                        <div class="invalid-feedback">
                                            Needs to be a valid number!
                                        </div>
                                    </div>
                                    <label class="form-label">Operator</label>
                                    <select class="form-select mb-3" name="op" value="<%= route.operator %>">
                                        <% ops.forEach(op=>{%>
                                            <option <% if(route.operator == op.id){%>selected<%}%> value="<%= op.id%>">
                                                <%= op.name%>
                                            </option>
                                            <%})%>
                                    </select>
                                    <label class="form-label">Minimum Rank</label>
                                    <select class="form-select" required name="rankReq">
                                        <% ranks.forEach(rank=>{%>
                                            <option value="<%= rank.minH%>" <% if(rank.minH.toString() == route.minRank){%>selected<%}%>>
                                                <%= rank.label%>
                                            </option>
                                            <%})%>
                                    </select>
                                    <br>
                                    <div class="mb-4">
                                        <label class="form-label" for="depICAO">Departure ICAO:</label>
                                        <input type="text" minlength="4" maxlength="4" class="form-control" placeholder="YSSY" required="" aria-label="ICAO Departure" name="depIcao" value="<%= route.depICAO%>">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                        <div class="invalid-feedback">
                                            Needs to be valid 4 character airport code.
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label" for="arrICAO">Arrival ICAO:</label>
                                        <input type="text" minlength="4" maxlength="4" class="form-control" placeholder="YMML" required=""
                                            aria-label="ICAO Departure" name="arrIcao" value="<%= route.arrICAO%>">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                        <div class="invalid-feedback">
                                            Needs to be valid 4 character airport code.
                                        </div>
                                    </div>
                                    <input type="hidden" value="<%= route.id%>" name="id">
                                    <button class="btn btn-primary">Update</button>
                                    <button class="btn btn-danger" type="button" onclick="remRoute('<%= route.id%>')">Remove</button>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <%})%>
            </div>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add Route</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form method="POST" action="/admin/routes/new" class="needs-validation" novalidate id="nrform">
                            <h2>Create new route</h2>
                            <br>
                            <div class="mb-3">
                                <label>Route Number</label>
                                <input type="text" class="form-control" placeholder="Route Number" aria-label="Route Number"
                                    required="" name="num">
                                <div class="valid-feedback">Looks good!</div>
                                <div class="invalid-feedback">Needs to be a valid route number.</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Aircraft<span style="font-size:12px"> (Can select multiple)</span></label>
                                <select class="form-select" name="aircraft" multiple required>
                                    <% craft.forEach(vic=>{%>
                                        <option value="<%= vic.livID%>">
                                            <%= vic.publicName%>
                                        </option>
                                        <%})%>
                                </select>
                                <div class="valid-feedback">Looks good!</div>
                                <div class="invalid-feedback">Need to select at least one aircraft.</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Flight Time<span style="font-size:12px"> (minutes, aprox)</span></label>
                                <input type="number" class="form-control" placeholder="Flight Time (mins)" required="" aria-label="Flight Time" name="ft">
                                <div class="valid-feedback">Looks good!</div>
                                <div class="invalid-feedback">Need a valid flight time.</div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label" for="depICAO">Departure ICAO:</label>
                                <input type="text" class="form-control" placeholder="YSSY" required aria-label="Departure ICAO" id="arrICAO"
                                    name="depIcao" minlength="4" maxlength="4">
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                                <div class="invalid-feedback">
                                    Needs to be valid 4 character airport code.
                                </div>
                            </div>
                            <div class="mb-4">
                                <label class="form-label" for="depICAO">Arrival ICAO:</label>
                                <input type="text" class="form-control" placeholder="YMML" required aria-label="Arrival ICAO" id="arrICAO"
                                    name="arrIcao" minlength="4" maxlength="4">
                                <div class="valid-feedback">
                                    Looks good!
                                </div>
                                <div class="invalid-feedback">
                                    Needs to be valid 4 character airport code.
                                </div>
                            </div>
                            <label class="form-label">Operator</label>
                            <select class="form-select mb-3" required name="op">
                                <% ops.forEach(op=>{%>
                                    <option value="<%= op.id%>">
                                        <%= op.name%>
                                    </option>
                                    <%})%>
                            </select>
                            <label class="form-label text-muted">Minimum Rank</label>
                            <select class="form-select" required name="minH">
                                <% ranks.forEach(rank=>{%>
                                    <option value="<%= rank.minH%>">
                                        <%= rank.label%>
                                    </option>
                                    <%})%>
                            </select>
                            <br>
                            <button class="btn btn-<%= config.other.navColor[2] %>">Create</button>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <%- include('./../components/footer.ejs') %>
        <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>
            
        <script>
            function remCode(id) {
                    const data = `id=${id}`;
                    const xhr = new XMLHttpRequest();
                    xhr.withCredentials = true;
                    xhr.addEventListener("readystatechange", function () {
                        console.log(this)
                        if (this.readyState === this.DONE) {
                            console.log(this.responseText);
                        }
                    });
                    xhr.open("DELETE", `/admin/routes/remove`);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(data);
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                }
                let slotCounter = 0;
                function addDepSlot(){
                    
                    const time = prompt("Enter depature time (HH:MM) zulu time.")
                    if(time){
                        if(time[2] == ":" && time.length == 5){
                            const element = document.createElement("input");
                            element.name = `slot_${slotCounter++}`;
                            element.value = `${time}z`
                            element.classList.add('form-control');
                            element.classList.add('w-auto');
                            element.classList.add('m-2');
                            element.setAttribute('readonly', 'true')
                            document.getElementById('departureSlots').appendChild(element);
                        }
                    }
                }
        </script>
                <script>
                    document.addEventListener('load', () => {
                        document.getElementById("nrform").on("keypress", function (event) {
                            var keyPressed = event.keyCode || event.which;
                            if (keyPressed === 13) {
                                event.preventDefault();
                                return false;
                            }
                        });
                    })
                </script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
</body>

</html>