<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 pt-3" id="content">
            <h2 class="d-inline-block">Events</h2>
            <button type="button" class="btn btn-<%= config.other.navColor[2] %> float-end" data-bs-toggle="modal"
                data-bs-target="#exampleModal">
                Add Event
            </button>
            <p class="text-muted">Click on an event to see more.</p>
            <table data-toggle="table" data-search="true" data-show-columns="true" id="mainTable">
                <thead>
                    <tr class="tr-class-2">
                        <th data-field="title">Title</th>
                        <th data-field="data">Date</th>
                        <th data-field="locations">Locations</th>
                    </tr>
                </thead>
                <tbody>
                    <% events.forEach(event=>{%>
                        <tr id="tr-id-<%=event.id%>" class="tr-class-<%=event.id%> pirepClickable" data-title="<%=event.id%>"
                            title="<%= event.id%>" data-object='{"key": "value"}' style="cursor: pointer;" data-bs-toggle="modal"
                            data-bs-target="#modal-<%=event.id%>">
                            <td id="td-id-<%=event.id %>" class="td-class-<%=event.id %>" data-title="<%= event.id %>">
                                <strong>
                                    <%= event.title%>
                                </strong>
                            </td>
                            <td data-text="<%= new Date(event.depTime).toLocaleDateString() %>">
                                <%= new Date(event.depTime).toLocaleDateString() %>
                            </td>
                            <td data-text="<%= event.depAir %> <i class='bi bi-chevron-right'></i> <%= event.arrAir%>">
                                <%= event.depAir %> <i class="bi bi-chevron-right"></i>
                                    <%= event.arrAir%>
                            </td>
                        </tr>
                        <%})%>
                </tbody>
            </table>
            <div class="modal fade hideScroll" 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 Event</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/events/new" class="needs-validation" novalidate>
                                <h2>Create New Event</h2>
                                <br>
                                <div class="mb-4">
                                    <label class="form-label" for="title">Event Title:</label>
                                    <input type="text" class="form-control my-1" id="title" placeholder="Event Title" required="" aria-label="Title" name="title" required>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Needs to be valid text.
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="desc">Event Title:</label>
                                    <textarea class="form-control" name="desc" id="desc" required placeholder="Event Description"></textarea>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Needs to be valid text.
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="depICAO">Departure ICAO:</label>
                                    <input type="text" class="form-control mb-3" placeholder="YSSY" required aria-label="Departure ICAO" id="depICAO" 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 mb-3" 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">
                                    Departure Time<br>
                                    <input type="datetime-local" class="form-control mb-3" placeholder="Departure Date" required aria-label="Time"
                                        name="date">
                                </label>
                                <div class="mb-4">
                                    <label class="form-label" for="desc">Aircraft:</label>
                                    <select class="form-select" name="aircraft" required>
                                        <% aircraft.forEach(vic=>{%>
                                            <option value="<%= vic.livID%>">
                                                <%= vic.publicName%>
                                            </option>
                                            <%})%>
                                    </select>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Needs to be an Aircraft.
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <label class="form-label" for="desc">Server:</label>
                                    <select class="form-select" required name="server">
                                        <option value="Expert">Expert</option>
                                        <option value="Training">Training</option>
                                        <option value="Casual">Casual</option>
                                    </select>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Needs to be an Aircraft.
                                    </div>
                                </div>
                                <label class="form-label w-100">
                                    Gates
                                    <br><span class="text-muted"><strong>NOTE:</strong> Please format the gates with the name followed by a comma, with no space, like follows: <i>Gate1,Gate2,Gate3</i></span>
                                </label>
                                <textarea class="form-control mb-3" name="gates" required placeholder="Gate1,Gate2,Gate3">Gate1,Gate2,Gate3</textarea>
                                <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>
        </div>
        <% events.forEach(event=>{%>
            <!-- Modal -->
            <div class="modal fade" id="modal-<%=event.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">
                                Event - <%= event.title%>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <strong class="text-danger">Currently Uneditable</strong>
                            <br><br>
                            <h4>
                                <%= event.title%>
                            </h4>
                            <p>
                                <%= event.body%>
                            </p>
                            <hr>
                            <h5>Details</h5>
                            <p>
                                <strong><i class="fa fa-plane"></i> Aircraft:</strong>
                                <%= event.airName%><br>
                                    <strong><i class="fa fa-plane-departure"></i> Departure:</strong>
                                    <%= event.depAir%><br>
                                        <strong><i class="fa fa-plane-arrival"></i> Arrival:</strong>
                                        <%= event.arrAir%><br>
                                            <strong><i class="bi bi-globe2"></i> Server:</strong>
                                            <%= event.server%><br>
                                                <strong><i class="bi bi-calendar2"></i> Date:</strong>
                                                <%= new Date(event.depTime).toLocaleString("EN-AU", {Hour12: true})%><br>
                                                    <strong><i class="bi bi-card-checklist"></i> Gates:</strong>
                                                    <% event.gates.forEach(gate=>{%>
                                                        <%= gate.gate%>, 
                                                        <%})%><br>
                            </p>
                            <button class="btn btn-danger" onclick="remEvent('<%= event.id%>')"><i class="bi bi-x-circle"></i></button>
                        </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>
                    function remEvent(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/events/remove`);
                            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                            xhr.send(data);
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }

                </script>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
                    integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
                    crossorigin="anonymous"></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>