<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>VACenter Setup</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="public/styles/scroll.css">
    <link rel="stylesheet" href="public/styles/main.css">
    <style>
        body {
            width: 100vw;
            background-image: url('/public/images/stockBG3.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            min-height: 100vh;
            height: auto;
        }
        .blur{
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 0;
            width: 100vw;
            height: 100vh;
            position: absolute;
        }
        .loginContainer {
            background-color: rgba(255, 255, 255, 1);
            position: relative;
            width: 60%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: auto;
            margin-right: auto;
        }
        .link-primary{
            cursor: pointer !important;
        }
    </style>
</head>
<body class="pt-1">
    <div class="blur d-none d-md-block"></div>
    <button class="colourDemoButton btn btn-primary position-absolute top-0 end-0 mt-3 me-5" onclick="window.location.reload();">Restart Setup</button>
    <div class="w-100 h-100 bg-light text-dark text-center p-3 d-block d-md-none" style="z-index: 1000;">
        <h1><i class="text-danger bi bi-exclamation-circle display-1"></i><br><br>
            Not Avaliable
        </h1>
        <p>Setup is only possible on desktop, please visit this page from a desktop.</p>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none d-md-block" id="page0">
        <div class="p-5 text-center text-dark h-auto">
            <img src="https://va-center.com/public/images/logo.webp" style="width: 10%; min-width: 60px;">
            <br><br>
            <h2><strong class="fw-bolder">Welcome to VACenter</strong></h2>
            <p>VACenter is a next generation crew center for Virtual Airlines. VACenter is a crew center with some amazing features, check out our <a class="link link-primary" href="https://va-center.com" target="_blank">website</a> for more info.</p>
            <button class="btn btn-primary" onclick="progressPage()">Setup VACenter</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page1">
        <div class="p-4 text-center text-dark h-auto">
            <img src="https://vanet.app/logo.png" style="width: 10%;">
            <br><br>
            <h2><strong class="fw-bolder">Quick Setup</strong></h2>
            <p>VACenter can integrate with <a class="link link-primary" href="https://vanet.app" target="_blank">VANet</a> to quickly setup your crew center.</p>
            <button class="btn btn-primary" onclick="setup()">Quick Setup</button>
            <br><br>
            <a class="link link-primary" onclick="progressPage()">Manual Setup</a>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page2">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary">
                <i class="bi bi-type" class="display-1 text-primary"></i>
            </h1>
            <h2><strong class="fw-bolder">VA Name</strong></h2>
            <p>This is the name of your VA.</p>
            <button class="btn btn-primary" onclick="setVAName()">Set Name</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page3">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary">
                <i class="bi bi-info-circle" class="display-1 text-primary"></i>
            </h1>
            <h2><strong class="fw-bolder">VA Code</strong></h2>
            <p>This is the 4 character code of your VA. (Example: Qantas Virtual would be QFVA, Air Tahiti Nui Virtual would be ATNV)</p>
            <button class="btn btn-primary" onclick="setVACode()">Set Code</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page4">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary">
                <i class="bi bi-image" class="display-1 text-primary"></i>
            </h1>
            <h2><strong class="fw-bolder">PIREP Images</strong></h2>
            <p>Do you want your Pilots to be able to submit pictures of their flights?</p>
            <% if(hosting){%>
                <p class="text-muted">This feature is disabled since you are running on VACenter Hosting.</p>
            <%}%>
            <div class="form-check form-switch text-center">
                <label class="form-check-label" for="flexSwitchCheckDefault">
                    <input class="form-check-input text-center" type="checkbox" id="flexSwitchCheckDefault" name="state" <% if(hosting){%>disabled<%}%>>
                    Allow Pictures
                </label>
            </div>
            <br>
            <button class="btn btn-primary" onclick="setPICS()">Set State</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page5">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary">
                <i class="bi bi-link-45deg" class="display-1 text-primary"></i>
            </h1>
            <h2><strong class="fw-bolder">Webhook</strong></h2>
            <p>Do you want events in VACenter to be sent to your discord server? (<a target="_blank" href="https://va-center.com/webhooks" class="link link-primary">List of events</a>)</p>
            <button class="btn btn-primary" onclick="setVAHook()">Set Webhook</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page6">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary colourDemo">
                <i class="bi bi-paint-bucket"></i>
            </h1>
            <h2><strong class="fw-bolder">Theme Colour</strong></h2>
            <p>What colour do you want the crew center to be?</p>
            <div class="m-0 g-2 row row-cols-4">
                <div class="col">
                    <button class="btn my-auto w-100 btn-primary" onclick="trialColour('primary')">Blue</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-secondary" onclick="trialColour('secondary')">Grey</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-danger" onclick="trialColour('danger')">Red</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-success" onclick="trialColour('success')">Green</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-warning" onclick="trialColour('warning')">Yellow</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-light border border-dark shadow border-2" onclick="trialColour('light')">White</button>
                </div>
                <div class="col">
                    <button class="btn my-auto w-100 btn-dark" onclick="trialColour('dark')">Dark</button>
                </div>
            </div>
            <br>
            <div class="form-check form-switch text-center">
                <label class="form-check-label" for="flexSwitchCheckDefault">
                    <input class="form-check-input text-center" type="checkbox" id="buttonAffector" name="buttonAffector">
                    Affect Buttons
                </label>
            </div>
            <br>
            <p class="d-none" id="whiteWarning">(White Selected)</p>
            <br>
            <button class="btn btn-primary colourDemoButton" onclick="setColour()">Set Colour</button>
        </div>
    </div>
    <div class="loginContainer h-auto mx-auto rounded mb-2 d-none" id="page7">
        <div class="p-4 text-center text-dark h-auto">
            <h1 class="display-1 text-primary">
                <i class="bi bi-image" class="display-1 text-primary"></i>
            </h1>
            <h2><strong class="fw-bolder">Review</strong></h2>
            <p>Please review the state of your VACenter, some of these options can not be changed later.</p>
            <div class="form-control shadow p-4 mx-auto w-75">
                <h3>VACenter</h3>
                <p>
                    <strong>Name:</strong> <span id="reviewName">null</span><br>
                    <strong>Code:</strong> <span id="reviewCode">null</span><br>
                    <strong>Allow Pirep Images:</strong> <span id="reviewImg">null</span><br>
                    <strong><i class="bi bi-discord"></i> Webhook:</strong> <span id="reviewWebhook">null</span><br>
                    <strong>Main Colour:</strong> <span id="reviewMColour">null</span><br>
                    <strong>Button Colour:</strong> <span id="reviewBColour">null</span><br>
                </p>
            </div>
            <br>
            <div class="form-control shadow p-4 mx-auto w-75">
                <strong>Default Login Information:</strong><hr>
                <strong>Username: </strong> 0<br>
                <strong>Password: </strong> 0
            </div>
            <br>
            <button class="btn btn-primary" onclick="setupNVN()">Setup</button>
        </div>
    </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/dist/sweetalert.min.js"></script>
    <script>
        let page = 0;
        let pages = ['page0', 'page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'];
        let options = {
            name: '',
            code: '',
            pirepPictures: '',
            colors: {
                main: {
                    label: '',
                    value: ''
                },
                buttons: {
                    label: '',
                    value: ''
                }
            },
            webhook: ''

        };
        function clearPages(){
            pages.forEach(page =>{
                if(page == 'page0'){
                document.getElementById(`${page}`).classList.remove("d-md-block")    
                }
                document.getElementById(`${page}`).classList.add("d-none")
            })
        }
        let progressPage = function() {
            page++;
            clearPages();
            document.getElementById(`page${page}`).classList.remove("d-none");
            if(page == 7){
                document.getElementById(`reviewName`).innerHTML = options.name;
                document.getElementById(`reviewCode`).innerHTML = options.code;
                document.getElementById(`reviewImg`).innerHTML = options.pirepPictures == true ? "True" : "False";
                document.getElementById(`reviewWebhook`).innerHTML = options.webhook ? `Yes <a class='link link-primary' href='/mirrorContent?content=${btoa(options.webhook)}' target='_blank'>See Link</a>` : "No";
                document.getElementById(`reviewMColour`).innerHTML = options.colors.main.label;
                document.getElementById(`reviewBColour`).innerHTML = options.colors.buttons.label;
            }
        }

        function setVAName(){
            swal({
                text: "Enter VA Name", content: "input", button: {
                    text: "Set"
                }
            }).then((value =>{
                if(value){
                    options.name = value;
                    progressPage();
                }else{
                    swal({
                        text: "We couldn't set the name, we will need to restart!", icon: "error", button: {
                            text: "Restart"
                        }
                    }).then((value =>{
                        window.location.reload();
                    }));
                }
                
            }))
        }
        
        function setVACode(){
            swal({
                text: "Enter VA Code", content: "input", button: {
                    text: "Set"
                }
            }).then((value =>{
                if(value){
                    options.code = value;
                    progressPage();
                }else{
                    swal({
                        text: "We couldn't set the code, we will need to restart!", icon: "error", button: {
                            text: "Restart"
                        }
                    }).then((value =>{
                        window.location.reload();
                    }));
                }
                
            }))
        }

        function setVAHook(){
            swal("Webhook",{
                content: "input",
                text: "Enter a webhook link, or leave it blank to skip.",
                buttons: true
            }).then((value => {
                if (value) {
                    options.webhook = value;
                }
                progressPage();
            }))
        }

        function setColour(){
            
            switch(currentTrial){
                case "primary":
                    options.colors.main.label = "Blue";
                    options.colors.main.value = "primary";
                    break;
                case "secondary":
                    options.colors.main.label = "Grey";
                    options.colors.main.value = "secondary";
                    break;
                case "danger":
                    options.colors.main.label = "Red";
                    options.colors.main.value = "danger";
                    break;
                case "success":
                    options.colors.main.label = "Green";
                    options.colors.main.value = "success";
                    break;
                case "warning":
                    options.colors.main.label = "Yellow";
                    options.colors.main.value = "warning";
                    break;
                case "light":
                    options.colors.main.label = "White";
                    options.colors.main.value = "light";
                    break;
                case "dark":
                    options.colors.main.label = "Dark";
                    options.colors.main.value = "Dark";
                    break;
            }
            if(btnAffected == true){
                options.colors.buttons.label = options.colors.main.label;
                options.colors.buttons.value = options.colors.main.value;
            }else{
                options.colors.buttons.label = "Blue";
                options.colors.buttons.value = "primary";
            }


            const buttons = Array.prototype.slice.call(document.getElementsByClassName('colourDemoButton'));
            const btnPrefix = "btn-";
            buttons.forEach(el => {
                const classes = el.className.split(" ").filter(c => !c.startsWith(btnPrefix));
                el.className = classes.join(" ").trim();
                el.classList.add(`btn-primary`);
            })
            progressPage()
        }
        
        function setPICS(){
            //alert(document.getElementById("flexSwitchCheckDefault").checked)
            options.pirepPictures = document.getElementById("flexSwitchCheckDefault").checked;
            progressPage()
        }

      
        function setup() {
            swal({text: "Enter VANet API Key, (This may take 10-15 seconds)", content: "input", button: {
                text: "Setup",
                closeModal: false
            }}).then(apiKey => {
                if (apiKey != null && apiKey != "") {
                    const data = `key=${apiKey}`;

                    const xhr = new XMLHttpRequest();
                    xhr.withCredentials = true;

                    xhr.addEventListener("readystatechange", function () {
                        if (this.readyState === this.DONE) {
                            if (this.status == 200) {
                                swal("Hooray", "Your VANet Account was successfully linked!", "success").then(() =>{
                                    return swal("Logging in.", "The default login for VACenter is: Username: 0, Password: 0. Click the button below to continue.", 'info').then(() => {
                                        window.location.href = "/"
                                    })  
                                });
                                                              
                            } else {
                                return swal("Oh no!", "There was an error linking your VANet!", "error")
                            }
                        }
                    });

                    xhr.open("POST", "/setup");
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    xhr.send(data);
                }else{
                    return swal("Oh no!", "You didn't enter a key", 'error');
                }
            })
        }
        let btnAffected = false;
        let currentTrial = "primary";

        function checkColours(){
            const buttons = Array.prototype.slice.call(document.getElementsByClassName('colourDemoButton'));
            if (btnAffected) {
                if (currentTrial != "danger" && currentTrial != "light") {
                    const btnPrefix = "btn-";
                    buttons.forEach(el => {
                        const classes = el.className.split(" ").filter(c => !c.startsWith(btnPrefix));
                        el.className = classes.join(" ").trim();
                        el.classList.add(`btn-${currentTrial}`);
                    })
                } else {
                    document.getElementById('buttonAffector').checked = false;
                    btnAffected = false;
                    checkColours();
                    swal("These buttons won't work", "The colour you chose will appear in VACenter, but you can't use this colour for buttons. No action is required.", "info");
                }
            } else {
                const btnPrefix = "btn-";
                buttons.forEach(el => {
                    const classes = el.className.split(" ").filter(c => !c.startsWith(btnPrefix));
                    el.className = classes.join(" ").trim();
                    el.classList.add(`btn-primary`);
                })
            }
        }

        document.getElementById('buttonAffector').addEventListener('change',(event) =>{
            btnAffected = event.target.checked;
            checkColours();
        })
        
        function trialColour(bsCode){
            currentTrial = bsCode
            const buttons = Array.prototype.slice.call(document.getElementsByClassName('colourDemoButton'));
            const text = Array.prototype.slice.call((document.getElementsByClassName('colourDemo')));
            
            if(currentTrial != "light"){
                document.getElementById('whiteWarning').className = "d-none";
                const textPrefix = "text-";
                text.forEach(el => {
                    const classes = el.className.split(" ").filter(c => !c.startsWith(textPrefix));
                    el.className = classes.join(" ").trim();
                    el.classList.add(`text-${bsCode}`);
                })
            }else{
                document.getElementById('whiteWarning').className = "";
                swal("It is working", "Whilst your colour choice won't be shown here (because it's too bright), it will be there in the Crew Center", "info");
                const textPrefix = "text-";
                text.forEach(el => {
                    const classes = el.className.split(" ").filter(c => !c.startsWith(textPrefix));
                    el.className = classes.join(" ").trim();
                    el.classList.add(`text-primary`);
                })

            }
            if(btnAffected){
                if(currentTrial != "danger" && currentTrial != "light"){
                    const btnPrefix = "btn-";
                    buttons.forEach(el => {
                        const classes = el.className.split(" ").filter(c => !c.startsWith(btnPrefix));
                        el.className = classes.join(" ").trim();
                        el.classList.add(`btn-${bsCode}`);
                    })
                }else{
                    document.getElementById('buttonAffector').checked = false;
                    btnAffected = false;
                    swal("These buttons won't work", "The colour you chose will appear in VACenter, but you can't use this colour for buttons. No action is required.", "info");
                    checkColours();
                }
            }
        }
        
        function setupNVN(){
            swal({
                title: "Are you sure you want to setup VACenter?",
                text: "This can take around 15 seconds, this page will be reloaded.  (To confirm type: Yes)",
                content: "input",
                icon: "warning",
                button: {
                    text: "Update",
                    closeModal: false
                },
                dangerMode: true,
            }).then((willSetup) => {
                if(willSetup == "Yes"){
                    //alert(options.pirepPictures)
                    const data = `data=${JSON.stringify(options)}`;

                    const xhr = new XMLHttpRequest();
                    xhr.withCredentials = true;

                    xhr.addEventListener("readystatechange", function () {
                        if (this.readyState === this.DONE) {
                            if (this.status == 200) {
                                setTimeout(() => {
                                    window.location.href = "/"
                                }, 2500);
                                return swal("Hooray", "Your VACenter was successfully setup!", "success");
                            } else {
                                return swal("Oh no!", "There was an error linking your VANet!", "error")
                            }
                        }
                    });

                    xhr.open("POST", "/setupNVN");
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                    xhr.send(data);
                }else {
                    swal("Aborted setup", "The setup was aborted", 'error');
                }
            })
        }
    </script>
</body>
</html>
