{{!
  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. licenses this file to you under the Apache License,
  Version 2.0 (the "License"); you may not use this file except
  in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied. See the License for the
  specific language governing permissions and limitations
  under the License.
}}
<div class="col-lg-12  margin-top-double">
    <h1 class="grey ">Android Sense</h1>
    <hr>
</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
    <img src="{{@unit.publicUri}}/images/android-sense-icon.png" class="img-responsive">
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
    <h4 class="doc-link">Click <a href="https://docs.wso2.com/display/IoTS100/Android+Sense"
                                  target="_blank">[ here ]</a> for latest instructions and
                         troubleshooting.</h4>
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
    <h3 class="uppercase">What it Does</h3>
    <hr>
    <p class="grey margin-top">Connect an Android device to WSO2 IoT Server and visualize sensor
                               data.</p>
    <br>
    <h3 class="uppercase">What You Need</h3>
    <hr>
    <p class="grey margin-top">You should have an Android Device to get started.</p>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="circle">STEP 01</span>
            &nbsp;&nbsp;&nbsp;Go ahead and click [Enroll Device].
        </li>
        <li class="padding-top-double">
            <span class="circle">STEP 02</span>
            &nbsp;&nbsp;&nbsp;You can either scan the QR code or directly download Android agent.
        </li>
        <li class="padding-top-double">
            <span class="circle">STEP 03</span>
            &nbsp;&nbsp;&nbsp;Install Android agent into your Android Device.
        </li>
        <li class="padding-top-double"><span class="circle">STEP 04</span>
            &nbsp;&nbsp;&nbsp;Proceed to [Prepare] section.
    </ul>
    <br>
    <a href="#" class="download-link btn-operations">
        <i class="fw fw-mobile fw-inverse fw-lg"></i> Enroll Device</a>
    <br/><br/>

    <div id="download-device-modal-content-links" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Please download the file from following link(Press CTRL+C).</h3>
                    <br/>
                    <div>
                        <input id="download-device-url" style="color:#3f3f3f;padding:5px"
                               type="text" value="" placeholder="Type here" size="60">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-400-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Exception at backend. Try Later.</h3>

                    <div class="buttons">
                        <a href="#" id="device-400-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-401-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>You have to log in first.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-401-link" class="blue-button">
                            Goto Login Page
                        </a>&nbsp;&nbsp;
                        <a href="#" onclick="hidePopup();" class="btn-operations">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-403-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Action not permitted.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-403-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-409-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Sketch does not exist.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-409-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="device-unexpected-error-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Unexpected error.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
</div>

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double grey-bg">
    <h3 class="uppercase">Prepare</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="circle">01</span>
            &nbsp;&nbsp;&nbsp;Connect Android device to network.
        </li>
        <li class="padding-top-double">
            <span class="circle">02</span>
            &nbsp;&nbsp;&nbsp;Start Android Sense app in your device.
        </li>
        <li class="padding-top-double">
            <span class="circle">03</span>
            &nbsp;&nbsp;&nbsp;Fill login form with the credentials.
            <i>(Use server URL as [&nbsp;https://&lt;WSO2_IoT_SERVER_HOST&gt;:&lt;
               HTTPS_SERVER_PORT&gt;&nbsp;] and click on
                <strong>Register Device</strong> button.)</i>
        </li>
        <li>
            <a href="{{@unit.publicUri}}/images/registerView.png" target="_blank"
               class="padding-top-double">
                <img src="{{@unit.publicUri}}/images/registerView.png" class="img-responsive">
            </a>
        </li>

        <li class="padding-top-double">
            <span class="circle">04</span>
            &nbsp;&nbsp;&nbsp;Once the device is enrolled, click on <strong>[+]</strong> button to
            select the sensors.
            <a href="{{@unit.publicUri}}/images/selectSensorView.png" target="_blank"
               class="padding-top-double">
                <img src="{{@unit.publicUri}}/images/selectSensorView.png" class="img-responsive">
            </a>
        </li>
        <li class="padding-top-double">
            <span class="circle">05</span>
            &nbsp;&nbsp;&nbsp;Click on <i>[Publish data]</i> button to publish sensor readings to
            IoT server.
            <a href="{{@unit.publicUri}}/images/publishDataView.png" target="_blank"
               class="padding-top-double">
                <img src="{{@unit.publicUri}}/images/publishDataView.png" class="img-responsive">
            </a>
        </li>
    </ul>
    <br>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Try Out</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="fw-stack fw-lg margin-right">
                <i class="fw fw-ring fw-stack-2x"></i>
                <i class="fw fw-right-arrow fw-stack-1x"></i>
            </span>
            &nbsp;&nbsp;&nbsp;You can view all your connected devices
            <a href="{{@app.context}}/devices">[Device Management]</a> page.
        </li>
        <li class="padding-top-double">
            <span class="fw-stack fw-lg margin-right">
                <i class="fw fw-ring fw-stack-2x"></i>
                <i class="fw fw-right-arrow fw-stack-1x"></i>
            </span>
            &nbsp;&nbsp;&nbsp;You can select any one of your connected devices for available
            operations and Real-Time data monitoring.
        </li>
        <li class="padding-top-double">
            <span class="fw-stack fw-lg margin-right">
                <i class="fw fw-ring fw-stack-2x"></i>
                <i class="fw fw-right-arrow fw-stack-1x"></i>
            </span>&nbsp;&nbsp;&nbsp;For historical analytics of sensor data navigate to device
                   analytics page.
        </li>
    </ul>
    <br/>
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/myDevices_analytics.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/myDevices_analytics.png" class="img-responsive">
        </a>
    </center>
</div>

<div id="qr-code-modal" data-enrollment-url="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk" class="hidden">
    <div class="content">
        <div class="row">
            <div class="col-lg-5 col-md-6 col-centered">
                <h3>Scan QR code to start enrollment</h3>
                <p>Please scan the QR code using your mobile device to retrieve enrollment URL.</p>
                <div class="panel panel-default">
                    <div class="panel-body col-centered">
                        <div class="qr-code"></div>
                    </div>
                </div>
                <form id="downloadForm" method="GET"
                      action="{{hostName}}{{@unit.publicUri}}/asset/androidsense.apk">
                    <div class="buttons" style="padding-bottom: 0px">
                        <input class="btn btn-operations" type="submit" value="Download Now">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="device-agent-downloading-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Agent will downloading shortly.</h3>
                </div>
            </div>
        </div>
    </div>
</div>

{{#zone "topCss"}}
    {{css "css/styles.css"}}
{{/zone}}

{{#zone "bottomJs"}}
    {{js "/js/download.js"}}
    <script type="text/javascript">
        $(".download-link").click(function () {
            toggleEnrollment();
        });

        function toggleEnrollment() {
            $(".modalpopup-content").html($("#qr-code-modal").html());
            generateQRCode(".modalpopup-content .qr-code");
            showPopup();
        }
    </script>
    {{js "/js/jquery.validate.js"}}
{{/zone}}