<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><%= session.id %> || <%= 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">
</head>

<body style="background: linear-gradient(rgba(255,255,255,1.8), rgba(255,255,255,1.8)), url('<%= config.other.bg%>'); background-size: cover; background-position: center;">
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
        <div class="container-fluid">
            <a class="navbar-brand">
                Session <%= session.id %> | <%= config.name %>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class='nav-item'>
                        <a class="nav-link active"><strong>State:</strong> <%= (session.state == "NI" ? "Awaiting Information" : (session.state == "AS" ? "Ready to Start" : (session.state == "FS" ? "Flight Started" :(session.state == "FF" ? "Completed" : false)))) %> </a>
                    </li>
                    <li class='nav-item'>
                        <a class="btn btn-danger <% if(session.state != "NI" && session.state != "AS" && session.state != "FF"){%>d-none<%}%>" href="/cancelSlot?ses=<%= session.id%>">Cancel Flight</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="w-100 p-5" id="pageContent">
    <% switch(session.state){
        case "NI":%> 
            <h1 class="display-6 fw-bold">Please fill in Required Info for your flight.</h1>
            <form class="form needs-validation" action="/updateSlot?state=NI&ses=<%=session.id%>" novalidate method="POST">
                <input type="hidden" name="sesID" value="<%= session.id %>">
                <label class="form-label">Aircraft:
                    <select class="form-select" required name="aircraft">
                        <% aircraft.forEach(vic =>{%>
                            <option value="<%= vic.livID%>"><%= vic.publicName%></option>
                        <%})%>
                    </select>
                </label><br><br>
                <button class="btn btn-<%= config.other.navColor[2] %>">Submit</button>
            </form>
        <% break;
        case "AS":%>
            <h1 class="display-6 fw-bold">Awaiting Start.</h1>
            <p>Please check the following information is correct (if not cancel this flight and try again), when you click "Start Flight" it will begin a timer, you can safely close this page during your flight. But come back to end it once you have parked at the gate.</p>
            <% if(config.key&&!(user.VANetID)){%>
                <p class="text-danger mb-3">Your account can not communicate with VANet servers. This PIREP will not be sent to
                    VANet. Visit the account page to fix this.</p>
                <%}%>
            <div class="form-control w-100 px-3 py-2">
                <h4>Flight Details:</h4>
                <p><strong class="fw-bold">Departure Airport:</strong> <%= route.depICAO%></p>
                <p><strong class="fw-bold">Arrival Airport:</strong> <%= route.arrICAO%></p>
                <p><strong class="fw-bold">Aircraft Used:</strong> <%= vehicleUsed.publicName %></p>
            </div>
            <br>
            <button class="btn btn-<%= config.other.navColor[2] %>" onclick="startFlight()">Start Flight</button>
        <%break;
        case "FS":%>
            <h1 class="display-6 fw-bold">In Flight</h1>
            <p class="text-muted">Live Map not available at this time.</p>
            <p>Once you have touched down at your destination, click the button below to end your flight. You can safely leave this window and come back.</p>
            <button class="btn btn-<%= config.other.navColor[2] %>" onclick="stopFlight()">Finish Flight</button>
        <%break;
        case "FF":%>
            <h1 class="display-6 fw-bold">Flight Finished</h1>
            <p class="text-muted">Live Map not available at this time.</p>
            <p>Congratulations! You flew for <%= parseFloat(session.arrTime).toFixed(2)%> minutes. Please enter the following information to create the PIREP:</p>
            <form method="POST" class="needs-validation" novalidate action="/finSlot?ses=<%= session.id%>" enctype="multipart/form-data">
                <div class="mb-3">
                    <label class="form-label">Fuel Used<span style="font-size:12px"> (kg)</span></label>
                    <input type="number" class="form-control" placeholder="Fuel used (kg)" required aria-label="Flight Time" name="fuel">
                    <div class="valid-feedback">Good work!</div>
                    <div class="invalid-feedback">Needs a valid number!</div>
                </div>
                <div class="mb-3">
                    <label for="multi">Multiplier <span class="text-muted"><% if(parseFloat(session.arrTime).toFixed(2) < 1){%>Not Avaliable on flights under 1 minute<%}else{%>Optional<%}%></span></label>
                    <input list="multiList" <% if(parseFloat(session.arrTime).toFixed(2) < 1){%> disabled <%}%> id="multi" name="multi" class="form-control" placeholder="Type to Search">
                    <datalist id="multiList">
                        <% multipliers.forEach(multi=>{%>
                            <option value="<%= multi.label %>">
                                <%= multi.amount%>x
                            </option>
                            <%})%>
                    </datalist>
                </div>
                <div class="mb-3">
                    <label class="form-label">Comments</label><br>
                    <textarea class="form-control-plaintext border border-secondary rounded p-2" name="comments"></textarea>
                    <div class="valid-feedback">Good work!</div>
                    <div class="invalid-feedback">Needs valid text!</div>
                </div>
                
                <% if(config.other.pirepPic == true){%>
                    <div class="mb-3">
                        <label class="form-label">PIREP Pictures</label><br>
                        <input class="form-control" type="file" name="pirepImg" accept=".png,.jpg,.gif,.jpeg,.webp,.svg" required>
                        <div class="valid-feedback">Good work!</div>
                        <div class="invalid-feedback">Needs valid image!</div>
                    </div>
                <%}%>
                <button class="btn btn-<%= config.other.navColor[2] %>">Submit</button>
            </form>
        <% break;
    }%>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js"></script>
    <script>
        function startFlight(){
            swal({
                title: "Are you sure?",
                text: "Are you sure you want to start the flight?",
                icon: 'info',
                showCancelButton: true,
                showDenyButton: true,
                dangerMode: true,
                buttons: {
                    cancel: "No",
                    confirm: {
                        text: "Yes",
                        value: true
                    }
                },
                closeOnConfirm: false
            }).then(state =>{
                if(state){
                    fetch("/updateSlot?state=SF&ses=<%=session.id%>", {
                        "method": "POST",
                        "headers": {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        "body": {
                        }
                    })
                        .then(response => {
                            window.location.reload();
                        })
                        .catch(err => {
                            console.error(err);
                        });
                }
            })
        }
        function stopFlight() {
                swal({
                title: "Are you sure?",
                text: "Are you sure you want to end the flight?",
                icon: 'info',
                showCancelButton: true,
                showDenyButton: true,
                dangerMode: true,
                buttons: {
                    cancel: "No",
                    confirm: {
                        text: "Yes",
                        value: true
                    }
                },
                closeOnConfirm: false
            }).then(state => {
                    if (state) {
                        fetch("/updateSlot?state=EF&ses=<%=session.id%>", {
                            "method": "POST",
                            "headers": {
                                "Content-Type": "application/x-www-form-urlencoded"
                            },
                            "body": {
                            }
                        })
                            .then(response => {
                                window.location.reload();
                            })
                            .catch(err => {
                                console.error(err);
                            });
                    }
                })
            }
    </script>
    <script>
        (function () {
            'use strict'

            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.querySelectorAll('.needs-validation')

            // Loop over them and prevent submission
            Array.prototype.slice.call(forms)
                .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                            event.preventDefault()
                            event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                })
        })()
    </script>
</body>

</html>