<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>Updates</h2>
            <hr>
            <span><strong>Current Version:</strong> <%= cv%></span>
            <br><br>
            <p class="text-muted">Temporarily Disabled</p>
            <br>
            <h2>Customisation</h2>
            <hr>

            <div class="form-control shadow p-3 my-3">
                <form action="/admin/settings/accent" method="post">
                    <h4>Accent Color</h4>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="primary"){%>checked<%}%> name="accent" value="primary" id="primary" autocomplete="off">
                    <label class="btn btn-primary my-2" for="primary">Blue</label>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="secondary"){%>checked<%}%> name="accent" value="secondary" id="secondary" autocomplete="off">
                    <label class="btn btn-secondary my-2" for="secondary">Grey</label>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="danger"){%>checked<%}%> name="accent" value="danger" id="danger" autocomplete="off">
                    <label class="btn btn-danger my-2" for="danger">Red</label>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="success"){%>checked<%}%> name="accent" value="success" id="success" autocomplete="off">
                    <label class="btn btn-success my-2" for="success">Green</label>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="warning"){%>checked<%}%> name="accent" value="warning" id="warning" autocomplete="off">
                    <label class="btn btn-warning my-2" for="warning">Yellow</label>
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="light"){%>checked<%}%> name="accent" value="light" id="light" autocomplete="off">
                    <label class="btn btn-light my-2" for="light">Light</label>
                    <!--<input type="radio" class="btn-check" <% if(config.other.navColor[0]=="white"){%>checked<%}%> name="accent" value="white" id="white" autocomplete="off">
                    <label class="btn btn-white my-2 border border-black" for="white">White</label>-->
                    <input type="radio" class="btn-check" <% if(config.other.navColor[0]=="dark"){%>checked<%}%> name="accent" value="dark" id="dark" autocomplete="off">
                    <label class="btn btn-dark my-2" for="dark">Dark</label>
                    <br>
                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="state" <% if(config.other.btnColor == true){%>checked<%}%>>
                        <label class="form-check-label" for="flexSwitchCheckDefault">Affect Buttons</label>
                    </div>
                    <span class="text-muted">Not avaliable with red or light</span>
                    <br><br>
                    <button class="btn btn-<%= config.other.navColor[2] %>" type="submit">Submit new Color</button>
                </form>
            </div>
            <div class="form-control shadow p-3 my-3">
                <form action="/admin/settings/bg" novalidate class="needs-validation" method="post">
                <h4>Background URL</h4>
                <div>
                    <input class="form-control" required type="url" name="value" id="fill1" value="<%= config.other.bg == "/public/images/stockBG2.jpg" ? "" : config.other.bg %>">
                    <div class="valid-feedback">Looks good!</div>
                    <div class="invalid-feedback">Need a valid URL!</div>
                </div>
                <br>
                <button type="submit" class="btn btn-<%= config.other.navColor[2] %>">Update</button>
                </form>
            </div>
            <div class="form-control shadow p-3 my-3">
                <form action="/admin/settings/logo" method="post" class="needs-validation" novalidate>
                <h4>Logo URL</h4>
                <div>
                    <input class="form-control" required type="url" name="value" value="<%= config.other.logo%>">
                    <div class="valid-feedback">Looks good!</div>
                    <div class="invalid-feedback">Need a valid URL!</div>
                </div>
                <br>
                <button type="submit" class="btn btn-<%= config.other.navColor[2] %>">Update</button>
                </form>
            </div>
            <div class="form-control shadow p-3 my-3">
                <form action="/admin/settings/pirepPic" novalidate class="needs-validation" method="post">
                    <h4>PIREP Pictures</h4>
                    <p>Allow Pilots to submit pictures of their Flights. <% if(hosting){%><span class="text-muted">This feature is disabled since you are on VACenter Standard Plan.</span><%}%></p>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" name="state" <% if(config.other.pirepPic == true){%>checked<%}%> <% if(hosting){%>disabled<%}%>>
                        <label class="form-check-label" for="flexSwitchCheckDefault">Allow Pictures</label>
                    </div>
                    <br>
                    <div class="progress">
                        <div class="progress-bar bg-<%= config.other.navColor[2] %>" role="progressbar" aria-valuenow="<%= store[0] %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= store[0]%>%"></div>
                    </div>
                    <br>
                    <span>Storage Used (<%= store[1]%>/<%=store[2]%>)</span><br>
                    <hr>
                    <div>
                        <label>Pireps will be removed <input min="0" max="24" step="any" type="number" required class="d-inline-block form-control w-auto" name="imgExpireDays" value="<%=(((((config.other.pirepPicExpire)/1000)/60)/60)/24)%>"> days after the PIREP has been approved/denied. <span class="text-muted" style="font-size: 10px;">Max 24 days</span></label>
                        <div class="valid-feedback">
                            Looks good!
                        </div>
                        <div class="invalid-feedback">
                            Needs to be a valid number of days! (Max 24)
                        </div>
                    </div>
                    <br>
                    <button type="submit" <% if(hosting){%>disabled<%}%> class="btn btn-<%= config.other.navColor[2] %>">Update</button>
                </form>
            </div>
            <div class="form-control shadow p-3 my-3" id="apps">
                <form action="/admin/applications/config" class="needs-validation" novalidate method="POST">
                    <h4>Applications</h4>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="APPCHECKBOX" name="state"
                            <%if(config.other.applications.state==true){%>checked<%}%>> <label class="form-check-label"
                                for="APPCHECKBOX">Enable Applications</label>
                    </div>
                    <div id="configLink">
                        <label class="form-label fw-bold">Link to Application Form <span class="text-muted"
                                style="font-size: 12px;">Google Forms, Airtable, etc</span></label>
                        <input value="<%= config.other.applications.link%>" type="url" class="form-control" name="link" required
                            placeholder="Link" id="configLinkInput">
                        <div class="invalid-feedback">Need a valid link</div>
                    </div>
                    <br>
                    <button type="submit" <% if(hosting){%>disabled<%}%> class="btn btn-<%= config.other.navColor[2] %>">Update</button>
                </form>
            </div>
            <br>
            <h2>3rd Party</h2>
            <hr>
            <div class="form-control shadow p-3 my-3">
                <h4>Identifier</h4>
                <p>Used for external identification. (IF Experiment Bot, etc)</p>
                <span style="word-wrap: break-word;"><strong>Ident: </strong><%= config.other.ident.slice(0,5)%></span>
            </div>
            <div class="form-control shadow p-3 my-3">
                <form action="/admin/settings/webhook" method="post" class="needs-validation" novalidate>
                    <h4>Webhook</h4>
                    <p>Used to send events like PIREPS to your communications server. <a class="link link-dark" href="https://va-center.com/webhooks" target="_blank">View List of Events</a> <span class="text-muted">(Discord only for now)</span></p>
                    <div>
                        <input class="form-control" required type="url" name="value" value="<%= config.other.webhook %>">
                        <div class="valid-feedback">Looks good!</div>
                        <div class="invalid-feedback">Need a valid URL!</div>
                    </div>
                    <br>
                    <button type="submit" class="btn btn-<%= config.other.navColor[2] %>">Update</button>
                </form>
            </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-Mr`cW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
        <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
        <script>
            function isValidHttpUrl(string) {
                    let url;

                    try {
                        url = new URL(string);
                    } catch (_) {
                        return false;
                    }

                    return url.protocol === "http:" || url.protocol === "https:";
                }
            const currentVersionFull = "<%= cv %>"
            console.log(currentVersionFull);
            const currentVersionNum = currentVersionFull.slice(0, -1);
            const currentVersionBranchInd = currentVersionFull.charAt(currentVersionFull.length - 1);
            const currentVersionBranch = currentVersionBranchInd == "B" ? "beta": (currentVersionBranchInd == "M" ? "master": null);

            function compareVersion(a, b) {
                    let x = a.split('.').map(e => parseInt(e));
                    let y = b.split('.').map(e => parseInt(e));
                    let z = "";

                    for (i = 0; i < x.length; i++) {
                        if (x[i] === y[i]) {
                            z += "e";
                        } else
                            if (x[i] > y[i]) {
                                z += "m";
                            } else {
                                z += "l";
                            }
                    }
                    if (!z.match(/[l|m]/g)) {
                        return 0;
                    } else if (z.split('e').join('')[0] == "m") {
                        return 1;
                    } else {
                        return -1;
                    }
                }
            document.getElementById('APPCHECKBOX').addEventListener('change', (e) => {
                    if (e.target.checked) {
                        document.getElementById("configLink").style.display = "block";
                        document.getElementById("configLinkInput").setAttribute("required", "true");
                    } else {
                        document.getElementById("configLinkInput").removeAttribute("required");
                        document.getElementById("configLink").style.display = "none";
                    }
                })
                if (document.getElementById('APPCHECKBOX').checked) {
                    document.getElementById("configLink").style.display = "block";
                    document.getElementById("configLinkInput").setAttribute("required", "true");
                } else {
                    document.getElementById("configLinkInput").removeAttribute("required");
                    document.getElementById("configLink").style.display = "none";
                }
        </script>
</body>

</html>
