{% extends "base.html" %}
{% load staticfiles %}

{% block title %}Simple route map{% endblock %}

{% block head %}
{{ block.super }}
    <script src="{% static "js/bloodhound.min.js" %}"></script>
    <script src="{% static "js/typeahead.bundle.min.js" %}"></script>
{% endblock head %}

{% block body %}

{{ block.super }}

<div class="container-fluid">

    <div class="row">
      <div class="col-md-2">
        <div id="directions" class="directions">
            <form id="submitForm">
              <div id="rooms-prefetch" class="form-group">
                <label for="route-to">Route From:</label>
                <input type="text" class="typeahead form-control" id="route-to" placeholder="Enter Room Number">
              </div>
              <div id="rooms-prefetch" class="form-group">
                <label for="route-from">Route To:</label>
                <input type="text" class="typeahead form-control" id="route-from" placeholder="Enter Room Number">
              </div>

                <div class="radio">
                  <label>
                    <input type="radio" name="typeRoute" id="routeTypeStandard" value="0" checked>
                    Standard Route
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="typeRoute" id="routeTypeBarrierFree" value="1">
                    Barrier Free Route
                  </label>
                </div>
              <button id="enterRoute" type="submit" class="btn btn-default">Go !</button>
                <br>
            </form>

        </div>
      </div>
      <div class="col-md-10">
        <div id="map" class="map"></div>
      </div>

    </div>
</div>

<script>  {% include 'routing.js' %} </script>


<script>
    var roomNums = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.whitespace,
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      prefetch: 'http://localhost:8000/api/rooms/?format=json'
    });

    // passing in `null` for the `options` arguments will result in the default
    // options being used
    $('#rooms-prefetch .typeahead').typeahead(null, {
      name: 'countries',
        limit: 100,
      source: roomNums
    });


    $( "#submitForm" ).submit(function( event ) {
    {#  alert( "Handler for .submit() called."  );#}
        var startNum = $('#route-from').val();
        var endNum = $('#route-to').val();
        var rType = $( "input:radio[name=typeRoute]:checked" ).val();
         addRoute(startNum, endNum, rType);
      event.preventDefault();
    });


</script>

{% endblock body %}
