{% extends "base.html" %}
{% block comments %}
<!--
# Copyright (c) 2015 Riverbed Technology, Inc.
#
# This software is licensed under the terms and conditions of the MIT License
# accompanying the software ("License").  This software is distributed "AS IS"
# as set forth in the License.
-->
{% endblock %}
{% load url from future %}
{% load add_attrs %}

{% block title %}App Framework: System Settings{% endblock %}

{% block header %}
    <script type="text/javascript">
        $(document).ready( function() {
            version = $('#id_maps_version').val();
            if ( version == 'DISABLED') {
                $('#mapsEnable').prop('checked', false);
                $('#osmDiv').hide();
                $('#mapsDiv').hide();
                $('#googleDiv').hide();
            } else {
                $('#mapsEnable').prop('checked', true);
                $('#mapsDiv').show();
                if (version == 'OPEN_STREET_MAPS') {
                    $('#osmDiv').show();
                    $('#googleDiv').hide();
                    $('#mapsVersionOSM').prop('checked', true);
                //} else if (version == 'STATIC_MAPS') {
                //    $('#osmDiv').hide();
                //    $('#googleDiv').hide();
                //    $('#mapsVersionStatic').prop('checked', true);
                } else {
                    $('#osmDiv').hide();
                    $('#googleDiv').show();
                    $('#mapsVersionGoogle').prop('checked', true);
                }
            }

            // copy key from input value and bind changes to feed back
            $('#id_maps_api_key_input').val($('#id_maps_api_key').val())
            $('#id_maps_api_key_input').change(function(e) {
                text = this.value;
                $('#id_maps_api_key').val(text);
                if (!text && $('#id_maps_version').value != 'BUSINESS') {
                    $('#id_maps_version').val('DEVELOPER');
                }
            });

            // Add our weather overlay controls
            initWeatherControls();

            setAPIKeyInput();

            $('input[name="optionMapsVersion"]').change(function(e) {
                toggleMapsVersion();
            });
            $('input[name="optionGoogleMapsVersion"]').change(function(e) {
                toggleGoogleMapsVersion();
            });

            $('#mapsEnable').change(function(e) {
                $('#mapsDiv').toggle();
                if (!$('#mapsEnable').is(':checked')) {
                    $('#id_maps_version').val('DISABLED');
                    if($('#weather-enable').is(':checked'))
                        $('#weather-enable').click();
                    $('#weather-enable').attr("disabled", true);
                } else {
                    $('#id_maps_version').val('FREE');
                    $('#osmDiv').hide();
                    $('#googleDiv').show();
                    $('#mapsVersionGoogle').prop('checked', true);
                    if(!$('#weather-enable').is(':checked'))
                        $('#weather-enable').click();
                    $('#weather-enable').attr("disabled", false);
                }
                setAPIKeyInput();
            });

        });

        function initWeatherControls() {
          // These are a list of weather field jQuery identifiers used to access
          // the HIDDEN weather fields. These fields are generated by Django
          var weatherFields = {
              enabled: '#id_weather_enabled',
              url: '#id_weather_url',
          }

          // Assign our handlers
          assignWeatherCtrlHandlers(weatherFields);

          // Input the values we have saved in the DB
          $('#weather-tile-url').val($(weatherFields.url).val());

          if ($(weatherFields.enabled).val() === 'True') {
              // Check the the "Enable Weather Overlay" box if weather is enabled
              $('#weather-enable').click();
          }
        }

        function assignWeatherCtrlHandlers(weatherFields) {
            // Attach handlers
            // Display or hide the weather-enable information
            $('#weather-enable').change(function() {
                $('#weatherOverlayDiv').toggle();
                if (!$('#weather-enable').is(':checked')) {
                    $(weatherFields.enabled).val('False');
                } else {
                    $(weatherFields.enabled).val('True');
                }
            });
            $('#weather-tile-url').change(function() {
                $(weatherFields.url).val($('#weather-tile-url').val());
            });
        }


        function toggleMapsVersion() {
            if ($('#mapsVersionOSM').is(':checked')) {
                $('#id_maps_version').val('OPEN_STREET_MAPS');
                $('#osmDiv').show();
                $('#googleDiv').hide();
            } else if ($('#mapsVersionGoogle').is(':checked')) {
                $('#osmDiv').hide();
                $('#googleDiv').show();
                toggleGoogleMapsVersion();
            //} else {
            //    $('#id_maps_version').val('STATIC_MAPS');
            //    $('#osmDiv').hide();
            //    $('#googleDiv').hide();
            };
        };
        function toggleGoogleMapsVersion() {
            if ($('#mapsVersionFree').is(':checked')) {
                $('#id_maps_version').val('FREE');
            } else {
                $('#id_maps_version').val('BUSINESS');
            };
            setAPIKeyInput();
        };
        function setAPIKeyInput() {
            var text = $('#id_maps_version').val();
            if (text == 'BUSINESS') {
                $('#mapsVersionFree').prop('checked', false);
                $('#mapsVersionBusiness').prop('checked', true);
                $('#id_maps_api_key_input').prop('placeholder', 'Client ID');
            } else {
                $('#mapsVersionFree').prop('checked', true);
                $('#mapsVersionBusiness').prop('checked', false);
                $('#id_maps_api_key_input').prop('placeholder', 'API Key');
            }
        };
    </script>
{% endblock %}

{% block header_row %}<h3>System Settings</h3>{% endblock %}

{% block content %}
    <div class="container">
      <div class="row">
        <div class="col-xs-8 block-centered">
            <form class="form-horizontal" action="" method="POST">
              {% csrf_token %}
              {% for field in form.hidden_fields %}
                {{ field }}
              {% endfor %}
              {% for field in form.visible_fields %}
                <div class="form-group{% if field.errors %} error{% endif %}">
                  <label class="col-xs-4 control-label" for="{{field.auto_id}}">
                      {{field.label_tag}}
                  </label>
                  <div class="col-xs-8">
                    {{ field }}
                    {% if field.errors %}
                        <span class="help-inline">
                            {% for err in field.errors %}{{ err }}{% endfor %}
                        </span>
                    {% else %}
                        {% if field.help_text %}
                            <span class="help-inline">{{ field.help_text }}</span>
                        {% endif %}
                    {% endif %}
                  </div>
                </div>
              {% endfor %}

              <div class="form-group well">
                <div class="row">
                    <label class="col-xs-4 control-label" for="mapsEnable">
                        Enable Map Widgets:
                    </label>
                    <div class="col-xs-8">
                        <input id="mapsEnable" type="checkbox">
                    </div>
                </div>

                <div class="row">
                <div id="mapsDiv" class="col-xs-offset-2" style="display: none;">

                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionOSM" value="OPEN_STREET_MAPS">
                     OpenStreetMap
                   </label>
                   <div id="osmDiv" style="display: none;">
                     <p>See the <a href="https://support.riverbed.com/apis/steelscript/appfwk/configuration.html?highlight=openstreetmap#system-settings">docs</a> for additional details on using OpenStreetMap.</p>
                   </div>

                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionGoogle" value="GOOGLE">
                     Google Maps
                   </label>
                   <div id="googleDiv" class="col-xs-offset-1" style="display: none;">
                       <p>Please select your method for accessing the Google Maps/Google Earth API (see the <a href="https://support.riverbed.com/apis/steelscript/appfwk/configuration.html?highlight=openstreetmap#system-settings">docs</a> for details):</p>
                       <label class="radio">
                         <input type="radio" name="optionGoogleMapsVersion" id="mapsVersionFree" value="FREE">
                         API Key
                       </label>
                       <label class="radio">
                         <input type="radio" name="optionGoogleMapsVersion" id="mapsVersionBusiness" value="BUSINESS">
                         Client ID
                       </label>
                       <input id="id_maps_api_key_input" type="text" style="width: 95%;" placeholder="Text input">
                       {% if form.maps_api_key.errors %}
                           <p class="text-danger">{% for err in form.maps_api_key.errors %}{{ err }}{% endfor %}</p>
                       {% endif %}
                   </div>

                   <!--
                   <label class="radio">
                     <input type="radio" name="optionMapsVersion" id="mapsVersionStatic" value="STATIC_MAPS">
                     Static Maps (not currently supported)
                   </label>
                   -->

                </div>
                </div>
              </div>

              <div class="form-group well">
              <div class="row">
                <label class="col-xs-4 control-label" for="weather-enable">
                    Enable Weather Overlay:
                </label>
                <div class="col-xs-8">
                    <input id="weather-enable" type="checkbox">
                </div>
              </div>

              <div class="row">
                <div id="weatherOverlayDiv" class="col-xs-offset-2 col-xs-8" style="display: none">
                   <p>
                   <b>Weather Tile URL</b>
                     URLs must contain X, Y, and Z coordinates in the following format:
                     <code>{x}</code> for X, <code>{y}</code> for Y, and <code>{z}</code> for Z.
                     <br>
                     (See the <a href="https://support.riverbed.com/apis/steelscript/appfwk/configuration.html?highlight=openstreetmap#system-settings">docs</a> for details)
                     <br>
                   </p>
                   <input id="weather-tile-url" type="text" style="width: 95%; margin-bottom:10px;" placeholder="Example URL: http://site.domain/api_key/tiles/{z}/{x}/{y}">
                   <br>
                   {% if form.weather_enabled.errors %}
                       <p class="text-danger">{% for err in form.weather_enabled.errors %}{{ err }}{% endfor %}</p>
                   {% endif %}
                   {% if form.weather_url.errors %}
                       <p class="text-danger">{% for err in form.weather_url.errors %}{{ err }}{% endfor %}</p>
                   {% endif %}
                </div>
              </div>
              </div>

              <div style="text-align: center;">
                  <input class="btn btn-primary" type="submit" value="Save" />
              </div>

          </form>
        </div>
      </div>
    </div>
{% endblock %}
