<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DRGT Media Manager</title>
    
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="/static/css/jquery-ui.min.css" rel="stylesheet">
    <link href="/static/css/drgt-advertisements.css" rel="stylesheet">

    <script src="/static/js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap-select.min.js" type="text/javascript"></script>

</head>

<body>
    <script type="text/javascript">
        var isVeryLowOnDiskSpace = false
        function checkIsDiskSpaceLow () {
            $.get("/api/diskstats", function (data) {
                let diskValue
                let testing = false
                diskValue = testing ? '1M' : data["available"]
                let actualValue = parseInt(diskValue.replace(/[a-zA-Z]/g, ''))
                $("#disk_stats").html("Available diskspace: " + data["available"]);
                if ((diskValue.includes('M') && actualValue <= 250) || diskValue.includes('K')) {
                    isVeryLowOnDiskSpace = true
                    alert(`Your storage only has ${data["available"]} left, for safety any building has been disabled`)
                    $("#preventAddProject").html("Advertisements cannot currently be added due to insufficient disk space.");
                    return true
                } else if (diskValue.includes('M') && actualValue <= 500) {
                    alert(`Your storage is low (${data["available"]} left), please add storage or make some space`)
                    $("#preventAddProject").html("");
                    isVeryLowOnDiskSpace = false
                    return false
                } else {
                    $("#preventAddProject").html("");
                    isVeryLowOnDiskSpace = false
                    return false
                }
            });
        }

        checkIsDiskSpaceLow()

        function checkLink () {
            const [navigation] = performance.getEntriesByType('navigation');
            let isReloaded = false
            if (navigation.type === 'reload') {
                isReloaded = true
            }

            const previousHost = document.referrer
            // console.log(previousHost)
            // console.log(window.location.href)

            let isValidUrl = previousHost.includes('localhost') || previousHost.includes('.drgt.');
            const validUrlPersist = previousHost.includes('aalst.drgt.')
            const appKeywords = ['theme', 'sounds', 'progressives', 'home'];
            const hasApp = previousHost.includes('app');
            const hasKeyword = appKeywords.some(keyword => previousHost.includes(keyword));

            if (previousHost !== window.location.href && validUrlPersist) {
                isValidUrl = false
            }

            // console.log('is valid host', isValidUrl)
            // console.log('come from drgt link', validUrlPersist)
            // console.log('has app key', hasApp)
            // console.log('has keyword', hasKeyword)
            // console.log('is reload', isReloaded)

            if (!isValidUrl && !(hasApp || hasKeyword) && !isReloaded) {
                // console.log('need to redirect')
                window.location.href = '/app';
            } else {
                // console.log('stay on page')
            }
        }
        checkLink()

        /**
         * Check if the user really wants to delete the workspace
         * 
         * @param  {Element} the form (contains tast which is equal to the value of the pressed button).
         * @return {Boolean} check
         */
        function check (form) {
            if (form.task == "delete") {
                return dialog('Do you really want to delete this workspace?');
            } else {
                return true;
            }
        }

        /* if user disables popup messages (confirm()) check if the time was less than 10ms (to fast for human) and asumme popup messages are blocked = execute delete*/
        function dialog (message) {
            var open_time = new Date();
            var result = confirm(message);
            var close_time = new Date();

            if (close_time - open_time < 10 || result) {
                return true;
            } else {
                return false;
            }
        }

        /*enable add button if field is not empty and disable otherwise*/
        function enableAdd (field) {
            if (field.value == '') {
                $('#add').attr('disabled', 'disabled');
            } else if (field.value !== '' && isVeryLowOnDiskSpace) {
                $('#PackageName').addClass("is-invalid");
                $('input[name="CreatePackage"]').attr('disabled', 'disabled');
            } else {
                $('#add').removeAttr('disabled');
            }
        }
    </script>
    <!-- Menu bar -->
        <nav class="navbar navbar-inverse">
        <div class="navbar-header">
        <!--
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>-->
          <a class="navbar-brand" href="/app">Home</a>
          <a class="navbar-brand" href="/">Advertisements</a>
          <a class="navbar-brand" href="/app/progressives/">Progressives</a>
          <a class="navbar-brand" href="/app/sounds/">Sounds</a>
          <a class="navbar-brand" href="/app/themes/">Themes</a>
        </div>
        <!--
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>-->
    </nav>


    <div class="container">
        <h1>Advertisements Administration</h1>
        <p id="disk_stats" style="text-align: center; margin-bottom: 40px;"></p>

        <div class="row">
            <div class="col-xs-12" style="margin-bottom: 30px;">
                <ul class="no-liststyle">
                    <li class="ui-state-default col-xs-12">
                        <form class="form-inline" method="POST" action="/">
                            <div style="width: calc(100% - 55px); float: left; padding: 0 15px;">
                                <input type="text" placeholder="Add new workspace" class="form-control" name="workspace"
                                    onkeyup="enableAdd(this);" />
                                <span id="preventAddProject"
                                    style="margin-left: 4px; color: coral; font-size: 1em; font-weight: 500;"></span>
                            </div>
                            <div class="text-right" style="width: 40px; float: left;">
                                <button id="add" type="submit" class="btn btn-primary" name="AddWorkspace" value="Add"
                                    disabled="true">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </button>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <footer class="footer">
      <div id="bigFooter" class="container">
          <div class="col-md-3">
              <p>3.24.0
</p>

          </div>
          <div class="col-md-6 text-center">
              <p>Your next system ! &nbsp; | &nbsp; <a href="http://www.drgt.com/">DR gaming technology</a> &nbsp; | &nbsp; &copy; 2025</p>

          </div>
          <div class="col-md-3 text-right">
              <img src="/static/images/drgt_logo.png">
          </div>
      </div>
      <div id="smallFooter" class="text-center">
            <p>Your next system ! &nbsp; | &nbsp; <a href="http://www.drgt.com/">DR gaming technology</a> &nbsp; | &nbsp; &copy; 2025</p>
      </div>
      <div id="xsFooter" class="text-center">
          <img src="/static/images/drgt_logo.png">
      </div>
    </footer>

</body>

</html>