<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flutter InAppBrowser</title>
    <link rel="stylesheet" href="http://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body class="text-center">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="masthead mb-auto">
            <div class="inner">
                <h3 class="masthead-brand">Flutter InAppBrowser</h3>
                <nav class="nav nav-masthead justify-content-center">
                    <a class="nav-link active" href="index.html">Home</a>
                    <a class="nav-link" href="page-1.html">Page 1</a>
                    <a class="nav-link" href="page-2.html">Page 2</a>
                </nav>
            </div>
        </header>

        <main role="main" class="inner cover">
            <h1 class="cover-heading">Inline WebView</h1>
            <img src="my-special-custom-scheme://images/flutter-logo.svg" alt="flutter logo">
            <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
            <select name="" id="">
                <option value="1">option 1</option>
                <option value="2">option 2</option>
            </select>
            <input type="file">
            <input type="file" accept="image/*" capture>
            <button onclick="testHistoryPush1()">History Push 1</button>
            <button onclick="testHistoryPush2()">History Push 2</button>
            <button onclick="testLocationHref()">Location Href</button>
            <p>
                <img src="https://via.placeholder.com/100x50" alt="placeholder 100x50">
            </p>
        </main>

        <!--<form method="POST" action="http://192.168.1.20:8082/test-post">
            <input type="text" name="name" placeholder="name" value="Lorenzo">
            <input type="submit" value="SEND">
        </form>-->

        <footer class="mastfoot mt-auto">
            <div class="inner">
                <p>Cover template for <a target="_blank" href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
                <p>Phone link example <a href="tel:1-408-555-5555">1-408-555-5555</a></p>
                <p>Email link example <a href="mailto:example@gmail.com">example@gmail.com</a></p>
            </div>
        </footer>
    </div>

    <script>

        var state = { 'page_id': 1, 'user_id': 5 };
        function testHistoryPush1() {
            var randomNumber = 100 * Math.random();
            var title = 'Hello World ' + randomNumber;
            var url = 'hello-foo-' + randomNumber + '.html';
            history.pushState(state, title, url);
        }

        function testHistoryPush2() {
            var randomNumber = 100 * Math.random();
            var title = 'Hello World ' + randomNumber;
            var url = 'hello-bar-' + randomNumber + '.html';
            history.replaceState(state, title, url);
        }

        function testLocationHref() {
            var randomNumber = 100 * Math.random();
            window.location = "#foo-" + randomNumber;
        }

        window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
            window.flutter_inappwebview.callHandler('handlerFoo').then(function(result) {
                window.flutter_inappwebview.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}, result).then(function(result) {

                });
            });
        });

        $(document).ready(function() {

            console.log("jQuery ready");

            var xhttp = new XMLHttpRequest();
            xhttp.addEventListener("load", function() {
              console.log(this.response);
            });
            xhttp.open("POST", "http://192.168.1.20:8082/test-ajax-post");
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("name=Lorenzo");

            var xhttp2 = new XMLHttpRequest();
            xhttp2.open("GET", "http://192.168.1.20:8082/test-download-file");
            xhttp2.send();

            fetch(new Request("http://192.168.1.20:8082/test-download-file")).then(function(response) {
                console.log(response);
            }).catch(function(error) {
                console.error("ERROR: " + error);
            });

            fetch("http://192.168.1.20:8082/test-ajax-post", {
                method: 'POST',
                body: JSON.stringify({
                    name: 'Lorenzo Fetch API'
                }),
                headers: {
                  'Content-Type': 'application/json'
                }
            }).then(function(response) {
                console.log(response);
            }).catch(function(error) {
                console.error("ERROR: " + error);
            });

            /*
            alert("Alert Popup");
            console.log(confirm("Press a button!"));
            console.log(prompt("Please enter your name", "Lorenzo"));
            */

            /*
            if ("geolocation" in navigator) {
                console.log("Geolocation API enabled");
                navigator.geolocation.getCurrentPosition(function(position) {
                    console.log(position.coords.latitude, position.coords.longitude);
                });
            } else {
                console.log("No geolocation API");
            }
            */
        });
    </script>
</body>
</html>