{% extends "base.html" %}
{% load static %}
{% load materializecss %}

{% block extra_js %}
<script>
$(document).ready(function() {
  $('select').material_select();
  $('.modal-trigger').leanModal();
  $('input[name="phone_number"]').parent().hide();
  $('select[name="service_provider"]').parent().parent().hide();

  $("input[name='subscription_type']").change(function () {
      if (this.value == "SMS") {
          $('input[name="phone_number"]').parent().show();
          $('select[name="service_provider"]').parent().parent().show();
      } else {
          $('input[name="phone_number"]').parent().hide();
          $('select[name="service_provider"]').parent().parent().hide();
      }
  });
});
</script>
{% endblock %}

{% block content %}
  <!-- Modal Trigger -->
  <div class="row">
    <div class="col s6">
      <p><a href="#mapzoom" class="modal-trigger"><img width="400" src="{{MEDIA_URL}}{{object.districts_map}}" /></a><br />Click to zoom</p>
    </div>

    <div class="col s6">
      <form method="post" action="{% url 'notifications:subscription_create' %}">
      {% csrf_token %}
      {{view.subscription_form|materializecss}}
      <button class="btn btn-primary" type="submit">Subscribe</button>
      </form>
      
    </div>

</div>
  <hr />
      <p><a class="btn btn-default" href="{% url 'notifications:municipality_list' %}">Municipality Listing</a></p>

<!-- Modal Structure -->
<div id="mapzoom" class="modal">
  <div class="modal-content">
    <h4>District Map</h4>
    <p><img width="1200" src="{{MEDIA_URL}}{{object.districts_map}}" /></p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>
<br />

{% endblock %}
