<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">
    <style>
        .swal-modal{
            z-index: 1000;
        }
        .fixed-table-body{
            height: auto !important;
        }
    </style>
    <%- 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>PIREPS</h2>
            <p class="text-muted">Click a PIREP to see more.</p>
            <table data-toggle="table" data-search="true" data-show-columns="true">
                <thead>
                    <tr class="tr-class-2">
                        <th data-field="route">Route</th>
                        <th data-field="pilot">Pilot</th>
                        <th data-field="aircraft">Aircraft</th>
                        <th data-field="status">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <% pireps.forEach(pirep =>{%>
                        <tr id="tr-id-<%=pirep.id%>" class="tr-class-<%=pirep.id%>" data-title="<%=pirep.route%>" data-object='{"key": "value"}' style="cursor: pointer;" data-bs-toggle="modal" data-bs-target="#modal-<%=pirep.id%>">
                            <td id="td-id-<%=pirep.id %>" class="td-class-<%=pirep.id %>" data-title="<%=pirep.route%>">
                                <strong><%= pirep.route%></strong>
                            </td>
                            <td data-text="<%= pirep.author%>"><%= config.code%><%= pirep.author%></td>
                            <td data-text="<%= pirep.vehiclePublic%>"><%= pirep.vehiclePublic%></td>
                            <td data-text="<% if(pirep.status == "a"){%>Approved<%}else if(pirep.status =="d"){%>Denied<%}else{%>Awaiting<%}%>">                                
                                <% if(pirep.status=="a" ){%><span class="text-success">Approved</span>
                                <%}else if(pirep.status=="d" ){%><span class="text-danger">Denied</span>
                                    <%}else{%>Awaiting<%}%>
                            </td>
                        </tr>
                    <%})%>
                </tbody>
            </table>
            <br>
            <% pireps.forEach(pirep=>{%>
                <div class="modal fade" id="modal-<%=pirep.id%>" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">PIREP <%= pirep.route%></h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-control mb-3">
                                    <h2>PIREP <%= pirep.route%></h2>
                                    <h5>Author: <%= config.code + pirep.author %></h5>
                                    <hr>
                                    <p>
                                        <strong><i class="fa fa-plane"></i> Aircraft: </strong><%= pirep.vehiclePublic %><br>
                                        <strong><i class="bi bi-shop"></i> Operator: </strong><%= operator_search.get(pirep.operator).name %><br>
                                        <strong><i class="fa fa-plane-departure"></i> Departure ICAO: </strong><%= pirep.depICAO %><br>
                                        <strong><i class="fa fa-plane-arrival"></i> Arrival ICAO: </strong><%= pirep.arrICAO %><br>
                                        <strong><i class="bi bi-chevron-up"></i> Route: </strong><%= pirep.route %><br>
                                        <strong><i class="bi bi-calendar-date"></i> Departure Date: </strong><%= new Date(pirep.filed).toLocaleDateString() %><br>
                                        <strong><i class="bi bi-clock"></i> Flight Time: </strong><%= (pirep.flightTime / 60).toFixed(2) %>hr (<%= pirep.flightTime %> mins)<br>
                                        <strong><i class="bi bi-droplet-half"></i> Fuel: </strong><%= pirep.fuel %>kg<br>
                                        <strong><i class="bi bi-text-left"></i> Comments: </strong><br>
                                        <p class="form-control p-2">
                                            <%= pirep.comments %><br>
                                        </p>
                                        <% if(config.other.pirepPic == true){%>
                                            
                                            <strong><i class="bi bi-image"></i> Image: </strong><br><br>
                                            <div class="w-100 text-center">
                                            <% if(pirep.pirepImg == "REMOVED"){%>  
                                                <p class="fw-bold">Image Removed in accorance to the image removal policy set in settings.</p>
                                            <%}else{%>
                                                <img src='<%= pirep.pirepImg%>.webp' style="width: 75%;" class="rounded mx-auto text-center">
                                            <%}%>
                                            
                                            </div>
                                        <%}%>
                                        
                                    </p>
                                </div>
                                <% if(pirep.status == "n"){%>
                                    <button type="button" class="btn btn-success" onclick="appPirep('<%= pirep.id%>')">Accept</button>
                                    <button type="button" class="btn btn-danger" onclick="remPirep('<%= pirep.id%>')">Deny</button>
                                <%}else if(pirep.status =="d"){%>
                                    <button type="button" class="btn btn-danger" disabled>Already Actioned (Denied)</button>
                                    <br><br>
                                    <h5>Reject Reason:</h5>
                                    <p><%= pirep.rejectReason%></p>
                                <%}else if(pirep.status =="a"){%>
                                    <button type="button" class="btn btn-success" disabled>Already Actioned (Accepted)</button>
                                <%}else{%>            
                                    <button type="button" class="btn btn-dark" disabled>Already Actioned (Unknown)</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>
        <%- 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 src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        
            <script>
                function appPirep(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("POST", `/admin/pireps/apr`);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send(data);
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                }
                function remPirep(id) {
                    swal({
                        title: "Rejection Reason",
                        text: "Please provide a rejection reason to the pilot.",
                        content: {
                            element: "input",
                            attributes: {
                                placeholder: "Rejection Reason",
                                type: "text",
                            },
                        },
                        icon: "info",
                        button: {
                            text: "Reject",
                            closeModal: false
                        },
                        dangerMode: true,
                    }).then((reason) => {
                        if (reason) {
                            const data = `id=${id}&rejectReason=${window.btoa(reason)}`;
                            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("POST", `/admin/pireps/den`);
                            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                            xhr.send(data);
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }else{
                            swal("Error", "No Reject Reason was provided.", "error");        
                        }
                    })
                }
            </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>