<html>
    <head>
        <title>Get Experience Guide</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="vars.js"></script>
        <style>
            #main {
                text-align: center;
            }

            #main-content.hide {
                display: none;
            }

            #text {
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                margin: 60px 0;
            }

            #links {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }

            #links img {
                height: 60px;
                margin: 20px 0;
            }

            @media only screen and (min-width: 600px) {
                #links {
                    flex-direction: row;
                }

                #links img {
                    margin: 0 30px;
                }
            }

            #qrcode {
                display: flex;
                justify-content: center;
            }
        </style>
    </head>
<body>
    <div id="main">
        <div id="main-content">
            <h1 id="text">Scarica l'app sullo store ufficiale per la tua piattaforma!</h1>
            <div id="links">
                <a id="ios-link" href="#">
                    <img src="apple_store.svg">
                </a>
                <a id="android-link" href="#">
                    <img src="google_store.svg">
                </a>
            </div>
        </div>
        <div id="qrcode"></div>
    </div>
    <script type="text/javascript">
        function getMobileOperatingSystem() {
            var userAgent = navigator.userAgent || navigator.vendor || window.opera;

            // Windows Phone must come first because its UA also contains "Android"
            if (/windows phone/i.test(userAgent)) {
                return "Windows Phone";
            }

            if (/android/i.test(userAgent)) {
                return "Android";
            }

            // iOS detection from: http://stackoverflow.com/a/9039885/177710
            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                return "iOS";
            }

            return "unknown";
        }

        window.onload = function () {
            let locationSplit = window.location.href.split("/");
            locationSplit = locationSplit[locationSplit.length - 1].split("?");
            let organizationSlug = locationSplit[0];

            if (location.search === '?qr') {
                document.getElementById("main-content").classList.add("hide");
                
                let qrcode = new QRCode("qrcode", {
                    text: window.location.href.split("?")[0],
                    width: 256,
                    height: 256,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.H
                });
            }
            else {
                fetch(apiBaseUrl + 'api/app/organizations/' + organizationSlug + '/stores/')
                .then(function(response) {
                    if (response.ok)
                        return response.json();
                    else
                        return false;
                })
                .then(function(resp) {
                    if (!resp) {
                        document.getElementById("main-content").classList.add("hide");
                        // document.getElementById("main").appendChild(document.createTextNode("The app for " + organizationSlug + " does not exist."));
                    }
                    else {
                        document.getElementById("ios-link").setAttribute("href", resp.ios_url);
                        document.getElementById("android-link").setAttribute("href", resp.android_url);

                        let platform = getMobileOperatingSystem();

                        if (platform == "Android")
                            window.location.replace(resp.android_url);
                        else if (platform == "iOS")
                            window.location.replace(resp.ios_url);
                    }
                });
            }
        }
    </script>
</body>
</html>